@ofgdev/ui-components 1.0.0

package/README.md

@@ -0,0 +1,102 @@
+# OWM UI Components
+
+A React component library with separate CSS loading for better compatibility with sandboxed environments like HubSpot modules.
+
+## Installation
+
+```bash
+npm install owm-ui-components
+```
+
+## Usage
+
+### 1. Import Components
+
+```tsx
+import { Button, Card, TextInput } from "@ofgdev/ui-components";
+```
+
+### 2. Import CSS
+
+You have several options for loading the CSS:
+
+#### Option A: Import CSS using the css export (Recommended for React apps)
+
+```tsx
+// In your main App.tsx or index.tsx
+import "@ofgdev/css";
+```
+
+#### Option B: Import CSS directly from the dist folder (Recommended for HubSpot modules)
+
+```tsx
+// Import the CSS file directly
+import "@ofgdev/dist/ui-components.css";
+```
+
+### 3. Use Components
+
+```tsx
+import React from "react";
+import { Button } from "@ofgdev/ui-components";
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary">Click me</Button>
+      <Button variant="secondary" size="small">
+        Small Button
+      </Button>
+    </div>
+  );
+}
+```
+
+## HubSpot Modules
+
+For HubSpot React modules, use Option B above to import the CSS directly. This ensures the styles are properly loaded in the sandboxed environment.
+
+```tsx
+// In your HubSpot module
+import React from "react";
+import { Button } from "@ofgdev/ui-components";
+import "@ofgdev/dist/ui-components.css";
+
+export default function MyHubSpotModule() {
+  return (
+    <div>
+      <Button variant="primary">HubSpot Button</Button>
+    </div>
+  );
+}
+```
+
+## Available Components
+
+- `Button` - Various button variants and sizes
+- `Card` - Container component
+- `TextInput` - Form input component
+- `ProgressBar` - Progress indicator
+- `Stepper` - Step-by-step navigation
+- `TagCheckBox` - Checkbox with tag styling
+- `TagCheckBoxGroup` - Group of tag checkboxes
+
+## CSS Variables
+
+The library uses CSS custom properties for theming. Make sure your app has the `ds-theme` class or the CSS variables are available in your global scope.
+
+```css
+.ds-theme {
+  --color-primary: #2c3b4e;
+  --color-secondary: #5e8081;
+  /* ... other variables */
+}
+```
+
+## Troubleshooting
+
+If you're experiencing issues with styles not loading in HubSpot modules:
+
+1. Make sure you're importing the CSS file directly: `import '@ofgdev/dist/ui-components.css'`
+2. Ensure the CSS variables are available in your global scope
+3. Check that the `ds-theme` class is applied to your container element

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface AccordionProps {
+    className?: string;
+    children?: React.ReactNode;
+    label: string;
+    defaultOpen?: boolean;
+}
+export declare const Accordion: ({ className, children, label, defaultOpen, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;

package/dist/BackIcon/BackIcon.d.ts

@@ -0,0 +1 @@
+export declare const BackIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/Button/Button.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "ghost-primary" | "ghost-secondary" | "ghost-tertiary";
+    size?: "default" | "small";
+    className?: string;
+    children: React.ReactNode;
+    isLoading?: boolean;
+    loadingText?: string;
+}
+export declare const Button: React.FC<ButtonProps>;

package/dist/Card/Card.d.ts

@@ -0,0 +1,6 @@
+interface CardProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const Card: ({ className, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export default Card;

package/dist/CardButton/CardButton.d.ts

@@ -0,0 +1,8 @@
+interface CardButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    children?: React.ReactNode;
+    label: string;
+    subText?: string;
+}
+export declare const CardButton: ({ className, children, label, subText, ...props }: CardButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CardButton;

package/dist/CheckBoxInput/CheckBoxInput.d.ts

@@ -0,0 +1,12 @@
+interface CheckBoxInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    labelSize?: import('../Heading/Heading').HeadingSize;
+    labelTop?: string;
+    vertical?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    optional?: boolean;
+}
+export declare const CheckBoxInput: ({ className, label, labelSize, vertical, name, errorMessage, description, required, labelTop, optional, defaultChecked, ...props }: CheckBoxInputProps) => import("react/jsx-runtime").JSX.Element;
+export default CheckBoxInput;

package/dist/CheckBoxTab/CheckBoxTabGroup.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+type CheckBoxTabGroupProps = {
+    name?: string;
+    className?: string;
+    children: React.ReactNode;
+    defaultValue?: string | string[];
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    multiple?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    optional?: boolean;
+    label?: string;
+    labelSize?: import('../Heading/Heading').HeadingSize;
+};
+interface CheckBoxTabGroupContextType {
+    name?: string;
+    selectedItems: string | string[];
+    updateSelection: (value: string, checked: boolean) => void;
+    multiple: boolean;
+}
+export interface CheckBoxTabGroupRef {
+    getSelectedValues: () => string | string[];
+}
+export declare const CheckBoxTabGroupContext: React.Context<CheckBoxTabGroupContextType | null>;
+export declare const CheckBoxTabGroup: React.ForwardRefExoticComponent<CheckBoxTabGroupProps & React.RefAttributes<CheckBoxTabGroupRef>>;
+export default CheckBoxTabGroup;

package/dist/CheckBoxTab/CheckBoxTabItem.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+type CheckBoxTabItemProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "checked"> & {
+    className?: string;
+    label: string;
+    value: string;
+    name?: string;
+    onChange?: (checked: boolean, value: string) => void;
+};
+export declare const CheckBoxTabItem: ({ className, label, value, name, onChange, ...props }: CheckBoxTabItemProps) => import("react/jsx-runtime").JSX.Element;
+export default CheckBoxTabItem;

package/dist/CheckBoxTab/index.d.ts

@@ -0,0 +1,3 @@
+export { CheckBoxTabGroup } from './CheckBoxTabGroup';
+export { CheckBoxTabItem } from './CheckBoxTabItem';
+export type { CheckBoxTabGroupRef } from './CheckBoxTabGroup';

package/dist/CompleteIcon/CompleteIcon.d.ts

@@ -0,0 +1 @@
+export declare const CompleteIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/DSProvider.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+export declare const DSProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/DatePicker/DatePicker.d.ts

@@ -0,0 +1,17 @@
+interface DatePickerProps {
+    value?: string;
+    onChange?: (date: string) => void;
+    placeholder?: string;
+    disabledDates?: string[];
+    minDate?: string;
+    maxDate?: string;
+    label?: string;
+    labelSize?: import('../Heading/Heading').HeadingSize;
+    required?: boolean;
+    errorMessage?: string;
+    description?: string;
+    optional?: boolean;
+    format?: string;
+}
+export declare function DatePicker({ value, onChange, placeholder, disabledDates, minDate, label, labelSize, maxDate, required, errorMessage, description, optional, format, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Heading/Heading.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export type HeadingSize = "8xl" | "5xl" | "3xl" | "2xl" | "lg" | "md" | "sm" | "xs" | "xxs";
+export interface HeadingProps {
+    children: React.ReactNode;
+    size?: HeadingSize;
+    as?: keyof React.JSX.IntrinsicElements;
+    className?: string;
+}
+export declare const Heading: React.FC<HeadingProps>;
+export default Heading;

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,20 @@
+interface ModalProps {
+    className?: string;
+    children?: React.ReactNode;
+    primaryButtonText?: string;
+    secondaryButtonText?: string;
+    secondaryButtonIsLoading?: boolean;
+    secondaryButtonLoadingMessage?: string;
+    onPrimaryButtonClick?: () => void;
+    onSecondaryButtonClick?: () => void;
+    secondaryButtonClassName?: string;
+    primaryButtonClassName?: string;
+    primaryButtonIsLoading?: boolean;
+    primaryButtonLoadingMessage?: string;
+    onClose?: () => void;
+    title?: string;
+    titleClassName?: string;
+    isOpen?: boolean;
+}
+export declare const Modal: ({ className, primaryButtonText, secondaryButtonText, onPrimaryButtonClick, onSecondaryButtonClick, secondaryButtonClassName, primaryButtonClassName, primaryButtonIsLoading, secondaryButtonIsLoading, children, title, titleClassName, isOpen, primaryButtonLoadingMessage, secondaryButtonLoadingMessage, onClose, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/dist/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+interface Option {
+    value: string | number;
+    label: string;
+}
+interface SelectProps {
+    options: Option[];
+    value?: (string | number)[];
+    onChange?: (value: (string | number)[]) => void;
+    placeholder?: string;
+    className?: string;
+    name?: string;
+    label?: string;
+    labelSize?: import('../Heading/Heading').HeadingSize;
+    disabled?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    optional?: boolean;
+    defaultValue?: (string | number)[];
+}
+export declare const MultiSelect: React.FC<SelectProps>;
+export default MultiSelect;

package/dist/NumberInput/NumberInput.d.ts

@@ -0,0 +1,14 @@
+interface NumberInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    prefix?: string;
+    suffix?: string;
+    label?: string;
+    labelSize?: import('../Heading/Heading').HeadingSize;
+    format?: "currency" | "percentage" | "number";
+    formatOnChange?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    optional?: boolean;
+}
+export declare const NumberInput: ({ className, value, prefix, suffix, label, labelSize, format, min, max, onChange, onBlur, formatOnChange, errorMessage, description, required, optional, defaultValue, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export default NumberInput;

package/dist/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+interface ProgressBarProps {
+    className?: string;
+    value?: number;
+    max?: number;
+    min?: number;
+}
+export declare const ProgressBar: ({ className, value, max, min, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default ProgressBar;

package/dist/RadioInput/RadioInput.d.ts

@@ -0,0 +1,16 @@
+interface Option {
+    value: string;
+    label: string | number;
+}
+interface RadioInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    labelSize?: import('../Heading/Heading').HeadingSize;
+    options: Option[];
+    vertical?: boolean;
+    errorMessage?: string;
+    description?: string;
+    optional?: boolean;
+    defaultValue?: string | number;
+}
+export declare const RadioInput: ({ className, options, label, labelSize, vertical, errorMessage, description, required, optional, name, defaultValue, ...props }: RadioInputProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioInput;

package/dist/Select/Select.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+interface Option {
+    value: string | number;
+    label: string;
+}
+interface SelectProps {
+    options: Option[];
+    value?: string | number;
+    onChange?: (value: string | number) => void;
+    placeholder?: string;
+    className?: string;
+    name?: string;
+    label?: string;
+    labelSize?: import('../Heading/Heading').HeadingSize;
+    disabled?: boolean;
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    optional?: boolean;
+    defaultValue?: string | number;
+}
+export declare const Select: React.FC<SelectProps>;
+export default Select;

package/dist/SliderInput/SliderInput.d.ts

@@ -0,0 +1,19 @@
+interface SliderInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    prefix?: string;
+    suffix?: string;
+    showLabel?: boolean;
+    label?: string;
+    labelSize?: import('../Heading/Heading').HeadingSize;
+    min?: number;
+    max?: number;
+    value?: number;
+    displayValue?: string;
+    inputSize?: "sm" | "md" | "lg";
+    format?: "currency" | "percentage" | "number";
+    errorMessage?: string;
+    description?: string;
+    required?: boolean;
+    optional?: boolean;
+}
+export declare const SliderInput: ({ className, prefix, suffix, min, max, value, step, onChange, onBlur, name, showLabel, displayValue, labelSize, label, inputSize, format, defaultValue, errorMessage, description, required, optional, ...props }: SliderInputProps) => import("react/jsx-runtime").JSX.Element;
+export default SliderInput;

package/dist/Stepper/Icons.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export declare const CheckIcon: React.FC<{
+    stroke?: string;
+    className?: string;
+}>;
+export declare const CollapseIcon: React.FC<{
+    fill?: string;
+    className?: string;
+}>;
+export declare const AddIcon: React.FC<{
+    stroke?: string;
+    className?: string;
+}>;
+export declare const LockedIcon: React.FC<{
+    stroke?: string;
+    className?: string;
+}>;

package/dist/Stepper/Step.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { StepComponentProps } from './types';
+interface StepProps extends StepComponentProps {
+    title: string;
+    children?: React.ReactNode;
+    collapsible?: boolean;
+    defaultExpanded?: boolean;
+    isLocked: boolean;
+    onAddSubStep?: () => void;
+}
+export declare const Step: React.FC<StepProps>;
+export {};

package/dist/Stepper/StepContent.d.ts

@@ -0,0 +1,5 @@
+export declare const StepContent: ({ children, step, currentStep, }: {
+    step: number | string | null;
+    currentStep?: number | string | null;
+    children: React.JSX.Element;
+}) => import("react").JSX.Element | null;

package/dist/Stepper/Stepper.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface StepperProps {
+    children: React.ReactNode;
+    currentStep?: number;
+    onStepChange?: (index: number) => void;
+    className?: string;
+}
+export declare const Stepper: React.FC<StepperProps>;

package/dist/Stepper/SubStep.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface SubStepProps {
+    label: string;
+    current?: boolean;
+    completed?: boolean;
+    position?: string;
+}
+export declare const SubStep: React.FC<SubStepProps>;

package/dist/Stepper/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Step';
+export * from './StepContent';
+export * from './Stepper';
+export * from './SubStep';

package/dist/Stepper/types.d.ts

@@ -0,0 +1,6 @@
+export interface StepComponentProps {
+    stepIndex?: number;
+    current?: boolean;
+    completed?: boolean;
+    onStepClick?: () => void;
+}

package/dist/Table/Table.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes, ReactNode } from 'react';
+interface Props extends HTMLAttributes<HTMLTableElement> {
+    children: ReactNode;
+}
+export declare const Table: ({ children, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Table;

package/dist/Table/TableBody.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactNode } from 'react';
+interface Props extends HTMLAttributes<HTMLTableSectionElement> {
+    className?: string;
+    children?: ReactNode;
+}
+export declare const TableBody: ({ children, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export default TableBody;

package/dist/Table/TableCell.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface Props extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    item?: string | number | undefined;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const TableCell: ({ item, children, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Table/TableHeader.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+interface Props extends HTMLAttributes<HTMLTableCellElement> {
+    items: string[];
+    thClassName?: string;
+}
+export declare const TableHeader: ({ items, className, thClassName }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Table/TableRow.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface Props extends React.HTMLAttributes<HTMLTableRowElement> {
+    className?: string;
+    children?: ReactNode;
+    show?: boolean;
+    isCollapsible?: boolean;
+}
+export declare const TableRow: ({ children, className, isCollapsible, show, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Table/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Table';
+export * from './TableHeader';
+export * from './TableCell';
+export * from './TableBody';
+export * from './TableRow';

package/dist/Text/Text.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export type TextSize = "8xl" | "5xl" | "3xl" | "2xl" | "lg" | "md" | "sm" | "xs" | "xxs";
+export interface TextProps {
+    children: React.ReactNode;
+    size?: TextSize;
+    as?: keyof React.JSX.IntrinsicElements;
+    className?: string;
+}
+export declare const Text: React.FC<TextProps>;
+export default Text;

package/dist/TextInput/TextInput.d.ts

@@ -0,0 +1,12 @@
+interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    value?: string;
+    prefix?: string;
+    suffix?: string;
+    label?: string;
+    labelSize?: import('../Heading/Heading').HeadingSize;
+    errorMessage?: string;
+    description?: string;
+    optional?: boolean;
+}
+export declare const TextInput: ({ className, prefix, suffix, label, labelSize, errorMessage, description, required, optional, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export default TextInput;

package/dist/Toast/Toast.d.ts

@@ -0,0 +1,13 @@
+interface ToastProps {
+    className?: string;
+    children?: React.ReactNode;
+    type?: "success" | "error" | "info" | "default";
+    message?: string;
+    title?: string;
+    titleClassName?: string;
+    messageClassName?: string;
+    isOpen?: boolean;
+    showProgressBar?: boolean;
+}
+export declare const Toast: ({ className, children, type, message, title, titleClassName, messageClassName, isOpen, showProgressBar, }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export default Toast;

package/dist/helper/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(...args: (string | false | null | undefined | (string | false | null | undefined)[])[]): string;

package/dist/helper/formatValue.d.ts

@@ -0,0 +1,8 @@
+declare function formatValue(value: number, format?: "currency" | "percentage" | "number", locale?: string): {
+    value: string;
+    formatted: string;
+} | {
+    value: number;
+    formatted: string;
+};
+export default formatValue;