@optilogic/core 1.0.0-beta.0

package/src/index.ts

@@ -0,0 +1,318 @@
+// Utility exports
+export { cn } from "./utils/cn";
+
+// Primitive components
+export { Button, buttonVariants, type ButtonProps } from "./components/button";
+export { Input, type InputProps } from "./components/input";
+export { Label, labelVariants, type LabelProps } from "./components/label";
+export { Textarea, type TextareaProps } from "./components/textarea";
+export { Badge, badgeVariants, type BadgeProps } from "./components/badge";
+export { Checkbox, type CheckboxProps } from "./components/checkbox";
+export { Switch, type SwitchProps } from "./components/switch";
+export { Progress, type ProgressProps } from "./components/progress";
+export { Separator, type SeparatorProps } from "./components/separator";
+export { Skeleton, type SkeletonProps } from "./components/skeleton";
+
+// Radix-based components
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  type SelectTriggerProps,
+} from "./components/select";
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "./components/tabs";
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  accordionItemVariants,
+  accordionTriggerVariants,
+  accordionContentVariants,
+  type AccordionVariant,
+  type AccordionItemProps,
+  type AccordionTriggerProps,
+  type AccordionContentProps,
+} from "./components/accordion";
+
+export {
+  Tooltip,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  TooltipPortal,
+  TooltipContent,
+  TooltipArrow,
+  type TooltipProps,
+} from "./components/tooltip";
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  type PopoverContentProps,
+} from "./components/popover";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+  type DropdownMenuItemProps,
+  type DropdownMenuLabelProps,
+  type DropdownMenuSubTriggerProps,
+  type DropdownMenuShortcutProps,
+} from "./components/dropdown-menu";
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+  type AlertDialogHeaderProps,
+  type AlertDialogFooterProps,
+} from "./components/alert-dialog";
+
+// Layout components
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  type CardProps,
+  type CardHeaderProps,
+  type CardTitleProps,
+  type CardDescriptionProps,
+  type CardContentProps,
+  type CardFooterProps,
+} from "./components/card";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+  type TableProps,
+  type TableHeaderProps,
+  type TableBodyProps,
+  type TableFooterProps,
+  type TableHeadProps,
+  type TableRowProps,
+  type TableCellProps,
+  type TableCaptionProps,
+} from "./components/table";
+
+export {
+  Modal,
+  ModalButton,
+  type ModalProps,
+  type ModalButtonProps,
+} from "./components/modal";
+
+export {
+  ConfirmationModal,
+  useConfirmation,
+  type ConfirmationModalProps,
+} from "./components/confirmation-modal";
+
+export {
+  ResizeHandle,
+  type ResizeHandleProps,
+} from "./components/resize-handle";
+
+export {
+  ResizablePanel,
+  type ResizablePanelProps,
+} from "./components/resizable-panel";
+
+// Feedback components
+export { Chip, type ChipProps } from "./components/chip";
+
+export {
+  LoadingSpinner,
+  loadingSpinnerVariants,
+  type LoadingSpinnerProps,
+} from "./components/loading-spinner";
+
+export { Toaster, type ToasterProps } from "./components/toaster";
+
+// Data components - import directly from folder to avoid circular dependency
+export {
+  // Main component
+  DataGrid,
+  
+  // Types - Column and data
+  type ColumnDef,
+  type SelectOption,
+  type FilterType,
+  type EditorType,
+  
+  // Types - Filter
+  type FilterConfig,
+  type FilterOperator,
+  type TextFilterOperator,
+  type NumberFilterOperator,
+  type DateFilterOperator,
+  
+  // Types - Sort
+  type SortConfig,
+  
+  // Types - Cell
+  type CellPosition,
+  type EditingCell,
+  type CellEditEvent,
+  
+  // Types - Configuration
+  type PaginationConfig,
+  type SearchConfig,
+  type DataGridState,
+  type DataGridProps,
+  type DataGridInternalState,
+  type DataGridContextValue,
+  
+  // Types - Sub-component props
+  type HeaderCellProps,
+  type FilterPopoverProps,
+  type CellEditorProps,
+  type GridCellProps,
+  
+  // Sub-components (for advanced customization)
+  HeaderCell,
+  FilterPopover,
+  CellEditor,
+  
+  // Hooks (for building custom grid implementations)
+  useDataGridState,
+  useKeyboardNavigation,
+  useColumnResize,
+  useColumnResizeManager,
+  
+  // Utilities (for custom data processing in controlled mode)
+  applyFilterOperator,
+  applyFilters,
+  applySorting,
+  getCellValue,
+} from "./components/data-grid/index";
+
+// Legacy type alias for backward compatibility
+/** @deprecated Use SortConfig instead */
+export type SortingConfig = {
+  field: string;
+  direction: "asc" | "desc";
+  onSort: (field: string) => void;
+};
+
+export {
+  Autocomplete,
+  type AutocompleteProps,
+  type AutocompleteOption,
+} from "./components/autocomplete";
+
+// Utility components
+export {
+  IconButton,
+  iconButtonVariants,
+  type IconButtonProps,
+} from "./components/icon-button";
+
+export {
+  CopyButton,
+  type CopyButtonProps,
+} from "./components/copy-button";
+
+export {
+  ThemePicker,
+  type ThemePickerProps,
+} from "./components/theme-picker";
+
+export { Calendar, type CalendarProps } from "./components/calendar";
+
+export {
+  DatePicker,
+  DatePickerInput,
+  type DatePickerProps,
+  type DatePickerInputProps,
+} from "./components/date-picker";
+
+export {
+  ContextMenu,
+  useContextMenu,
+  type ContextMenuProps,
+  type ContextMenuItem,
+  type UseContextMenuResult,
+} from "./components/context-menu";
+
+// Theme system
+export {
+  // Types
+  type Theme,
+  type ThemeHex,
+  type ThemeHSL,
+  type ColorFieldConfig,
+  // Presets
+  GREEN_THEME,
+  OPTILOGIC_LEGACY_THEME,
+  FUTURISTIC_THEME,
+  NATURE_THEME,
+  SCIFI_THEME,
+  OCEAN_THEME,
+  SUNSET_THEME,
+  FOREST_THEME,
+  CYBERPUNK_THEME,
+  MINIMALIST_LIGHT_THEME,
+  DARK_ELEGANT_THEME,
+  PRESET_THEMES,
+  ALL_THEMES,
+  getPresetTheme,
+  getDefaultTheme,
+  isPresetTheme,
+  // Utilities
+  hexToHsl,
+  themeToHsl,
+  applyTheme,
+  getCurrentTheme,
+  validateTheme,
+  cloneTheme,
+  areThemesEqual,
+  exportTheme,
+  importTheme,
+} from "./theme";

package/src/styles.css

@@ -0,0 +1,96 @@
+/**
+ * opti-ui Base Styles
+ *
+ * This file contains the CSS variables required for opti-ui components.
+ * Import this file or define these variables in your own CSS.
+ *
+ * Usage:
+ *   import '@optilogic/core/styles.css';
+ *
+ * Or define in your own CSS:
+ *   :root { --background: 0 0% 100%; ... }
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --success: 142 76% 36%;
+    --success-foreground: 210 40% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --divider: 214.3 31.8% 91.4%;
+    --chip: 210 40% 96.1%;
+    --chip-foreground: 222.2 47.4% 11.2%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --success: 142 76% 36%;
+    --success-foreground: 210 40% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 222.2 47.4% 11.2%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --divider: 217.2 32.6% 17.5%;
+    --chip: 217.2 32.6% 17.5%;
+    --chip-foreground: 210 40% 98%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/tailwind-preset.ts

@@ -0,0 +1,129 @@
+import type { Config } from "tailwindcss";
+
+/**
+ * opti-ui Tailwind CSS preset
+ *
+ * This preset provides the theme configuration required for opti-ui components.
+ * Consumers should extend their Tailwind config with this preset.
+ *
+ * @example
+ * // tailwind.config.js
+ * import { optiUiPreset } from '@optilogic/core/tailwind-preset';
+ *
+ * export default {
+ *   presets: [optiUiPreset],
+ *   content: [
+ *     './src/**\/*.{js,ts,jsx,tsx}',
+ *     './node_modules/@optilogic/core/dist/**\/*.{js,mjs}'
+ *   ]
+ * }
+ */
+export const optiUiPreset: Partial<Config> = {
+  darkMode: ["class"],
+  theme: {
+    extend: {
+      colors: {
+        // Background colors
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+
+        // Card
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+
+        // Popover
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+
+        // Primary
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+
+        // Secondary
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+
+        // Muted
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+
+        // Accent
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+
+        // Destructive
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+
+        // Success
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+
+        // Warning
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+
+        // Border, input, ring
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        divider: "hsl(var(--divider))",
+
+        // Chip
+        chip: {
+          DEFAULT: "hsl(var(--chip))",
+          foreground: "hsl(var(--chip-foreground))",
+        },
+
+        // Chart colors
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default optiUiPreset;

package/src/theme/index.ts

@@ -0,0 +1,41 @@
+/**
+ * Theme Module
+ *
+ * Exports all theme types, presets, and utilities.
+ */
+
+// Types
+export type { Theme, ThemeHex, ThemeHSL, ColorFieldConfig } from "./types";
+
+// Presets
+export {
+  GREEN_THEME,
+  OPTILOGIC_LEGACY_THEME,
+  FUTURISTIC_THEME,
+  NATURE_THEME,
+  SCIFI_THEME,
+  OCEAN_THEME,
+  SUNSET_THEME,
+  FOREST_THEME,
+  CYBERPUNK_THEME,
+  MINIMALIST_LIGHT_THEME,
+  DARK_ELEGANT_THEME,
+  PRESET_THEMES,
+  ALL_THEMES,
+  getPresetTheme,
+  getDefaultTheme,
+  isPresetTheme,
+} from "./presets";
+
+// Utilities
+export {
+  hexToHsl,
+  themeToHsl,
+  applyTheme,
+  getCurrentTheme,
+  validateTheme,
+  cloneTheme,
+  areThemesEqual,
+  exportTheme,
+  importTheme,
+} from "./utils";