@sprinklrjs/spaceweb 10.1.0

package/esm/date-picker/types.d.ts

@@ -0,0 +1,104 @@
+/// <reference types="react" />
+import { CalendarProps as BaseCalendarProps, DatepickerProps as BaseDatepickerProps, SharedStylePropsT } from 'baseui/datepicker';
+import { TimePickerProps } from '../time-picker';
+import { InputSize, InputVariant } from '../input';
+import { Override } from '../overrides/types';
+import { Intent } from '../types';
+export declare type FormatString = string;
+export declare type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export declare type CalendarProps = Omit<BaseCalendarProps, 'overrides'> & {
+    formatString?: FormatString;
+    overrides?: DatepickerOverrides;
+    adapter?: any;
+    weekStartsOn?: WeekStartsOn;
+};
+export declare type TimeSelect = 'start' | 'end';
+export declare type DateTimeSelectSharedProps = {
+    $timeSelect: TimeSelect;
+};
+export declare type DatepickerOverrides<T = SharedStyleProps> = {
+    CalendarContainer?: Override<T>;
+    CalendarHeader?: Override<T>;
+    Day?: Override<T>;
+    Input?: Override<T>;
+    InputWrapper?: Override<T>;
+    Month?: Override<T>;
+    MonthContainer?: Override<T>;
+    MonthHeader?: Override<T>;
+    MonthYearSelectButton?: Override<T>;
+    MonthYearSelectIconContainer?: Override<T>;
+    MonthYearSelectPopover?: Override<T>;
+    MonthYearSelectStatefulMenu?: Override<T>;
+    NextButton?: Override<T>;
+    NextButtonIcon?: Override<T>;
+    Popover?: Override<T>;
+    PrevButton?: Override<T>;
+    PrevButtonIcon?: Override<T>;
+    Root?: Override<T>;
+    TimePicker?: Override<TimePickerProps & Record<string, any>>;
+    TimePickerFormControl?: Override<Record<string, any>>;
+    DateInputFormControl?: Override<Record<string, any>>;
+    Week?: Override<T>;
+    WeekdayHeader?: Override<T>;
+    Footer?: Override<T>;
+    DateTimeSelect?: Override<DateTimeSelectSharedProps>;
+};
+export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSelectStart' | 'timeSelectEnd' | 'value' | 'onChange' | 'quickSelect' | 'quickSelectOptions' | 'size' | 'overrides' | 'onDayClick' | 'onDayMouseOver' | 'onDayMouseLeave' | 'onMonthChange' | 'onYearChange' | 'formatString' | 'peekNextMonth' | 'fixedHeight'> & {
+    intent?: Intent;
+    timeSelect?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    adapter?: any;
+    isOpen?: boolean;
+    variant?: InputVariant;
+    value: Date | Date[] | undefined;
+    onChange?: (data: {
+        value?: (Date | undefined)[] | Date | null;
+    }) => any;
+    size?: InputSize;
+    overrides?: DatepickerOverrides;
+    autoSizeInput?: boolean;
+    formatString?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * @deprecated This will be removed in next major release. Spaceweb will handle this prop.
+     */
+    peekNextMonth?: boolean;
+    /**
+     * @deprecated This will be removed in next major release. Spaceweb will handle this prop.
+     */
+    fixedHeight?: boolean;
+};
+export declare type StatefulContainerProps = {
+    children: (props: StatelessDatePickerProps) => JSX.Element;
+    adapter?: any;
+    value?: Date;
+    onChange?: (data: {
+        value?: Date | undefined | null;
+    }) => any;
+    startOpen?: boolean;
+};
+export declare type DatePickerProps = Omit<StatelessDatePickerProps, 'value' | 'range'> & Omit<StatefulContainerProps, 'children'>;
+export declare type DatePickerSharedProps = SharedStylePropsT;
+export declare type SharedStyleProps = {
+    $date: Date;
+    $disabled?: boolean;
+    $endDate?: boolean;
+    $endOfMonth?: boolean;
+    $hasRangeHighlighted?: boolean;
+    $hasRangeOnRight?: boolean;
+    $hasRangeSelected?: boolean;
+    $isFocusVisible?: boolean;
+    $isHighlighted?: boolean;
+    $isHovered?: boolean;
+    $outsideMonth?: boolean;
+    $peekNextMonth?: boolean;
+    $pseudoHighlighted?: boolean;
+    $pseudoSelected?: boolean;
+    $range?: boolean;
+    $selected?: boolean;
+    $startDate?: boolean;
+    $startOfMonth?: boolean;
+    $outsideMonthWithinRange?: boolean;
+    $month?: number;
+};

package/esm/date-picker/types.js

@@ -0,0 +1 @@
+export {};

package/esm/date-picker/useDatePickerState.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare type UseDatePickerStateType = {
+    onClose?: () => void;
+    onOpen?: () => void;
+    startOpen?: boolean;
+};
+export declare const useDatePickerState: ({ onClose, onOpen, startOpen }?: UseDatePickerStateType) => {
+    isOpen: boolean | undefined;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
+    handleOpen: () => void;
+    handleClose: () => void;
+};
+export {};

package/esm/date-picker/useDatePickerState.js

@@ -0,0 +1,20 @@
+import { __read } from "tslib";
+import { useState, useCallback } from 'react';
+export var useDatePickerState = function (_a) {
+    var _b = _a === void 0 ? {} : _a, onClose = _b.onClose, onOpen = _b.onOpen, startOpen = _b.startOpen;
+    var _c = __read(useState(startOpen), 2), isOpen = _c[0], setIsOpen = _c[1];
+    var handleOpen = useCallback(function () {
+        setIsOpen(true);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    }, [setIsOpen, onOpen]);
+    var handleClose = useCallback(function () {
+        setIsOpen(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [setIsOpen, onClose]);
+    return {
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        handleOpen: handleOpen,
+        handleClose: handleClose,
+    };
+};

package/esm/date-picker/utils.d.ts

@@ -0,0 +1,24 @@
+import { Locale } from '../locale';
+interface FormatDateParams {
+    date: Date | Date[] | undefined;
+    formatString?: string;
+    locale: any;
+    dateHelpers?: any;
+}
+export declare const normalizeDashes: (formatString: string) => string;
+export declare const formatDate: (params: FormatDateParams) => any;
+export declare const getAriaLabel: (value: Date | Date[] | undefined, formatDisplayValue: (date?: Date | Date[] | undefined) => string | undefined, locale: Locale) => string;
+export declare const prepareLocale: (locale?: globalThis.Locale, options?: {
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+} | undefined) => any;
+export declare const isTimeInRange: (date: Date | Date[] | null | undefined, { minDate, maxDate, dateHelpers, }: {
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+    dateHelpers?: any;
+}) => boolean;
+export declare const isDayInRange: (date: Date | Date[] | null | undefined, { minDate, maxDate, dateHelpers, }: {
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+    dateHelpers?: any;
+}) => boolean;
+export {};

package/esm/date-picker/utils.js

@@ -0,0 +1,74 @@
+import { __assign } from "tslib";
+import en from 'date-fns/locale/en-US';
+import getInterpolatedString from 'baseui/helpers/i18n-interpolation';
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
+import { DEFAULT_FORMAT_STRING } from './constants';
+// replacing both hyphens and em-dashes with en-dashes
+export var normalizeDashes = function (formatString) { return formatString.replace(/-/g, '–').replace(/—/g, '–'); };
+export var formatDate = function (params) {
+    var date = params.date;
+    var formatString = params.formatString || normalizeDashes(DEFAULT_FORMAT_STRING);
+    var dateHelpers = params.dateHelpers || new DateHelpers(dateFnsAdapter);
+    var locale = params.locale;
+    var format = function (dateToFormat) { return dateHelpers.formatDate(dateToFormat, formatString, locale); };
+    if (!date) {
+        return '';
+    }
+    if (Array.isArray(date) && !date[0] && !date[1]) {
+        return '';
+    }
+    if (Array.isArray(date)) {
+        return date.map(function (day) { return format(day); }).join(' – ');
+    }
+    return format(date);
+};
+export var getAriaLabel = function (value, formatDisplayValue, locale) {
+    // No date selected
+    if (!value || (Array.isArray(value) && !value.length)) {
+        return '';
+    }
+    // Date selected in a non-range picker
+    if (!Array.isArray(value)) {
+        return getInterpolatedString(locale.timeRangePicker.selectedDate, {
+            date: formatDisplayValue(value) || '',
+        });
+    }
+    // Start and end dates are selected in a range picker
+    if (value.length > 1) {
+        return getInterpolatedString(locale.timeRangePicker.selectedDateRange, {
+            startDate: formatDisplayValue(value[0]),
+            endDate: formatDisplayValue(value[1]),
+        });
+    }
+    // A single date selected in a range picker
+    return "".concat(getInterpolatedString(locale.timeRangePicker.selectedDate, {
+        date: formatDisplayValue(value[0]),
+    }), " ").concat(locale.timeRangePicker.selectSecondDatePrompt);
+};
+export var prepareLocale = function (locale, options) {
+    if (locale === void 0) { locale = en; }
+    return (__assign(__assign({}, locale), { options: __assign(__assign({}, locale.options), ((options === null || options === void 0 ? void 0 : options.weekStartsOn) !== undefined && { weekStartsOn: options.weekStartsOn })) }));
+};
+// checks whether given date(both day & time) is in [minDate, maxDate] range.
+export var isTimeInRange = function (date, _a) {
+    var minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.dateHelpers, dateHelpers = _b === void 0 ? new DateHelpers(dateFnsAdapter) : _b;
+    if (!date) {
+        return true;
+    }
+    if (Array.isArray(date)) {
+        return date.every(function (_date) { return (!minDate || !dateHelpers.isBefore(_date, minDate)) && (!maxDate || !dateHelpers.isAfter(_date, maxDate)); });
+    }
+    return (!minDate || !dateHelpers.isBefore(date, minDate)) && (!maxDate || !dateHelpers.isAfter(date, maxDate));
+};
+// checks whether given date(only day) is in [minDate, maxDate] range.
+export var isDayInRange = function (date, _a) {
+    var minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.dateHelpers, dateHelpers = _b === void 0 ? new DateHelpers(dateFnsAdapter) : _b;
+    if (!date) {
+        return true;
+    }
+    if (Array.isArray(date)) {
+        return date.every(function (_date) { return !dateHelpers.isDayDisabled(_date, { minDate: minDate, maxDate: maxDate }); });
+    }
+    return !dateHelpers.isDayDisabled(date, { minDate: minDate, maxDate: maxDate });
+};

package/esm/form-control/context.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Intent } from '../types';
+export declare const formControlContext: import("react").Context<{
+    intent?: Intent | undefined;
+}>;
+export declare const FormControlProvider: import("react").Provider<{
+    intent?: Intent | undefined;
+}>;
+export declare const FormControlConsumer: import("react").Consumer<{
+    intent?: Intent | undefined;
+}>;
+export declare const useFormControl: () => {
+    intent?: Intent;
+};
+/**
+ * @param props
+ * uses form values to be passed using context to child components
+ * this hook can be scaled to incorporate multiple props
+ */
+export declare const useContextualFormProps: <T extends {
+    intent?: Intent;
+}>(props: T) => T;

package/esm/form-control/context.js

@@ -0,0 +1,18 @@
+import { __assign } from "tslib";
+import { createContext, useContext } from 'react';
+export var formControlContext = createContext({ intent: 'default' });
+formControlContext.displayName = 'FormControlContext';
+export var FormControlProvider = formControlContext.Provider;
+export var FormControlConsumer = formControlContext.Consumer;
+export var useFormControl = function () { return useContext(formControlContext); };
+/**
+ * @param props
+ * uses form values to be passed using context to child components
+ * this hook can be scaled to incorporate multiple props
+ */
+export var useContextualFormProps = function (props) {
+    var _a;
+    var contextProps = useFormControl();
+    var intent = (_a = props.intent) !== null && _a !== void 0 ? _a : contextProps.intent;
+    return __assign(__assign({}, props), { intent: intent });
+};

package/esm/form-control/form-control.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { FormControlProps } from './types';
+declare const FormControl: ({ overrides, label, caption, disabled, error, positive, htmlFor, children, intent, required, layout, $as, className, subText, subTextAsIcon, }: FormControlProps) => React.ReactElement;
+export { FormControl };

package/esm/form-control/form-control.js

@@ -0,0 +1,54 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _uniqueId from 'lodash/uniqueId';
+import { useMemo, useRef } from 'react';
+import * as React from 'react';
+import { add$props } from '../helpers';
+import { Stack, StackItem } from '../stack';
+import InfoIcon from '../icon/components/info';
+import ErrorIcon from '../icon/components/error-clr';
+import { useOverrides } from '../overrides';
+import { StatefulTooltip } from '../tooltip';
+import { FormControlProvider } from './context';
+import { StyledCaption, StyledControlContainer, StyledInfoIconContainer, StyledLabel, StyledLabelContainer, StyledRequiredDot, StyledRoot, StyledSubText, } from './styled-component';
+function chooseRenderedHint(caption, error, positive, sharedProps) {
+    if (error && typeof error !== 'boolean') {
+        return typeof error === 'function' ? error(sharedProps) : error;
+    }
+    if (positive && typeof positive !== 'boolean') {
+        return typeof positive === 'function' ? positive(sharedProps) : positive;
+    }
+    if (caption) {
+        return typeof caption === 'function' ? caption(sharedProps) : caption;
+    }
+    return null;
+}
+var FormControl = function (_a) {
+    var overrides = _a.overrides, label = _a.label, caption = _a.caption, disabled = _a.disabled, error = _a.error, positive = _a.positive, htmlFor = _a.htmlFor, children = _a.children, intent = _a.intent, required = _a.required, layout = _a.layout, $as = _a.$as, className = _a.className, subText = _a.subText, subTextAsIcon = _a.subTextAsIcon;
+    var onlyChildProps = React.Children.only(children).props;
+    var a11yCaptionId = useRef(_uniqueId('sw-id-'));
+    // First try to infer id from props or children. Create new id if needed.
+    var a11yFieldId = useRef(htmlFor || onlyChildProps.id || _uniqueId('sw-id-'));
+    var sharedProps = __assign(__assign({}, add$props({ required: required, layout: layout, intent: intent, disabled: disabled })), { $error: !!error, $positive: !!positive });
+    var hint = chooseRenderedHint(caption, error, positive, sharedProps);
+    var hintEl = intent === 'error' && (caption || error) ? (_jsxs(Stack, __assign({ direction: "horizontal", gap: 2, shrink: true }, { children: [_jsx(ErrorIcon, { size: 14 }, void 0), _jsx(StackItem, { children: hint }, void 0)] }), void 0)) : (hint);
+    var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, StyledLabelContainer), 2), LabelContainer = _b[0], labelContainerProps = _b[1], _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Label, StyledLabel), 2), Label = _c[0], labelProps = _c[1], _d = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.RequiredDot, StyledRequiredDot), 2), RequiredDot = _d[0], requiredDotProps = _d[1], _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Root, StyledRoot), 2), Root = _e[0], rootProps = _e[1], _f = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SubText, StyledSubText), 2), SubText = _f[0], subTextProps = _f[1], _g = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer, StyledInfoIconContainer), 2), InfoIconContainer = _g[0], infoIconContainerProps = _g[1], _h = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.ControlContainer, StyledControlContainer), 2), ControlContainer = _h[0], controlContainerProps = _h[1], _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Caption, StyledCaption), 2), Caption = _j[0], captionProps = _j[1], _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip, StatefulTooltip), 2), SubTextTooltip = _k[0], subTextTooltipProps = _k[1];
+    var formControlProviderValue = useMemo(function () { return ({ intent: intent }); }, [intent]);
+    var shouldRenderSubTextInTooltip = layout === 'horizontal' || subTextAsIcon;
+    return (_jsx(FormControlProvider, __assign({ value: formControlProviderValue }, { children: _jsxs(Root, __assign({ "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && (_jsxs(LabelContainer, __assign({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [_jsx(Label, __assign({ "data-spaceweb": "form-control-label", htmlFor: a11yFieldId.current }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && _jsx(RequiredDot, __assign({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? (_jsx(SubTextTooltip, __assign({ content: subText, size: "md" }, subTextTooltipProps, { children: _jsx(InfoIconContainer, __assign({}, infoIconContainerProps, { children: _jsx(InfoIcon, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? (_jsx(SubText, __assign({}, subTextProps, { children: typeof subText === 'function' ? subText(sharedProps) : subText }), void 0)) : null, _jsxs(ControlContainer, __assign({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
+                            if (!child)
+                                return null;
+                            var key = child.key || String(index);
+                            return React.cloneElement(child, {
+                                key: key,
+                                id: a11yFieldId.current,
+                                'aria-errormessage': error ? a11yCaptionId.current : null,
+                                'aria-describedby': caption || positive ? a11yCaptionId.current : null,
+                                'aria-required': required ? 'true' : 'false',
+                                disabled: onlyChildProps.disabled || disabled,
+                                error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
+                                positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive,
+                            });
+                        }), (caption || error || positive) && (_jsx(Caption, __assign({ "data-spaceweb": "form-control-caption", id: a11yCaptionId.current }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
+};
+export { FormControl };

package/esm/form-control/index.d.ts

@@ -0,0 +1,3 @@
+export type { FormControlOverrides, FormControlProps, layout } from './types';
+export { StyledLabel, StyledCaption, StyledControlContainer, StyledInfoIconContainer, StyledSubText, StyledRoot, StyledLabelContainer, StyledRequiredDot, } from './styled-component';
+export { FormControl } from './form-control';

package/esm/form-control/index.js

@@ -0,0 +1,2 @@
+export { StyledLabel, StyledCaption, StyledControlContainer, StyledInfoIconContainer, StyledSubText, StyledRoot, StyledLabelContainer, StyledRequiredDot, } from './styled-component';
+export { FormControl } from './form-control';

package/esm/form-control/styled-component.d.ts

@@ -0,0 +1,8 @@
+export declare const StyledSubText: import("../style/styled").StyledComponent;
+export declare const StyledInfoIconContainer: import("../style/styled").StyledComponent;
+export declare const StyledRequiredDot: import("../style/styled").StyledComponent;
+export declare const StyledRoot: import("../style/styled").StyledComponent;
+export declare const StyledCaption: import("../style/styled").StyledComponent;
+export declare const StyledLabelContainer: import("../style/styled").StyledComponent;
+export declare const StyledLabel: import("../style/styled").StyledComponent;
+export declare const StyledControlContainer: import("../style/styled").StyledComponent;

package/esm/form-control/styled-component.js

@@ -0,0 +1,33 @@
+import { styled } from '../style';
+var getIntentColor = function (_a, _b) {
+    var theme = _a.theme;
+    var $intent = _b.$intent;
+    switch ($intent) {
+        case 'success':
+            return { color: theme.spr.supportSuccess };
+        case 'warning':
+            return { color: theme.spr.supportWarning };
+        case 'error':
+            return { color: theme.spr.text01 };
+        case 'default':
+        default:
+            return { color: theme.spr.text02 };
+    }
+};
+export var StyledSubText = styled('div', 'spr-text-02 typography-l3 mb-1');
+export var StyledInfoIconContainer = styled('div', 'spr-ui-03 rounded-full flex items-center justify-center ml-2 flex-shrink-0', function (_a) {
+    var px2rem = _a.px2rem;
+    return ({ height: px2rem(14), width: px2rem(14) });
+});
+export var StyledRequiredDot = styled('span', 'ml-1 spr-support-error rounded-full h-1 w-1 flex-shrink-0');
+export var StyledRoot = styled('div', 'mb-4 flex', function (utils, _a) {
+    var $layout = _a.$layout;
+    return $layout === 'horizontal' ? 'flex-row items-baseline' : 'flex-col';
+});
+export var StyledCaption = styled('div', 'typography-l2 my-1', getIntentColor);
+export var StyledLabelContainer = styled('div', 'flex items-center my-1 w-full', function (utils, _a) {
+    var $layout = _a.$layout;
+    return $layout === 'horizontal' ? 'w-4/24 mr-2' : '';
+});
+export var StyledLabel = styled('label', 'typography-l2 spr-text-02');
+export var StyledControlContainer = styled('div', 'w-full');

package/esm/form-control/types.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Override } from '../overrides';
+import { ClassName, Intent } from '../types';
+export declare type layout = 'vertical' | 'horizontal' | 'inline';
+export declare type FormControlOverrides = {
+    LabelContainer?: Override<Record<string, any>>;
+    Label?: Override<Record<string, any>>;
+    RequiredDot?: Override<Record<string, any>>;
+    Caption?: Override<Record<string, any>>;
+    ControlContainer?: Override<Record<string, any>>;
+    Root?: Override<Record<string, any>>;
+    SubText?: Override<Record<string, any>>;
+    InfoIconContainer?: Override<Record<string, any>>;
+    SubTextTooltip?: Override<Record<string, any>>;
+};
+export declare type FormControlProps = {
+    children: React.ReactElement;
+    disabled?: boolean;
+    label?: React.ReactNode;
+    /**
+     * Help text to render b/w Label and the form field.
+     */
+    subText?: React.ReactNode;
+    /**
+     * If true, render info icon and display subText in Tooltip
+     */
+    subTextAsIcon?: boolean;
+    caption?: React.ReactNode;
+    error?: boolean | React.ReactNode;
+    positive?: React.ReactNode;
+    htmlFor?: string;
+    className?: ClassName;
+    $as?: React.ElementType;
+    layout?: layout;
+    overrides?: FormControlOverrides;
+    required?: boolean;
+    intent?: Intent;
+};
+export declare type SharedProps = {
+    $disabled: boolean;
+    $error: boolean;
+    $positive: boolean;
+    $required: boolean;
+    $layout: layout;
+    $intent: Intent;
+};

package/esm/form-control/types.js

@@ -0,0 +1 @@
+export {};

package/esm/grid/Col.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author Ivan Torres
+ */
+import { PropsWithChildren, ReactElement } from 'react';
+import { ColProps } from './types';
+export declare const Col: {
+    (props: PropsWithChildren<ColProps>): ReactElement;
+    displayName: string;
+};
+export default Col;

package/esm/grid/Col.js

@@ -0,0 +1,44 @@
+import { __assign, __read, __spreadArray } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @author Ivan Torres
+ */
+import { useMemo } from 'react';
+import { Box } from '../box';
+import useStyle from '../style/useStyle';
+import { filterOwnProps } from './utils';
+var getClassList = function (column, breakpoint) {
+    if (column === void 0) { column = {}; }
+    var colSpan = column.colSpan, colStart = column.colStart, colEnd = column.colEnd, rowSpan = column.rowSpan, rowStart = column.rowStart, rowEnd = column.rowEnd;
+    var classList = [];
+    var prefix = breakpoint ? "".concat(breakpoint, ":") : '';
+    if (colEnd)
+        classList.push("".concat(prefix, "col-end-").concat(colEnd));
+    if (colSpan)
+        classList.push("".concat(prefix, "col-span-").concat(colSpan));
+    if (colStart)
+        classList.push("".concat(prefix, "col-start-").concat(colStart));
+    if (rowEnd)
+        classList.push("".concat(prefix, "row-end-").concat(rowEnd));
+    if (rowSpan)
+        classList.push("".concat(prefix, "row-span-").concat(rowSpan));
+    if (rowStart)
+        classList.push("".concat(prefix, "row-start-").concat(rowStart));
+    return classList;
+};
+export var Col = function (props) {
+    var theme = useStyle().theme;
+    var screens = theme.screens;
+    var className = props.className, style = props.style, children = props.children;
+    var classList = [];
+    var breakpoints = useMemo(function () { return Object.keys(screens); }, [screens]);
+    classList = classList.concat.apply(classList, __spreadArray([], __read(getClassList(props)), false));
+    breakpoints.forEach(function (breakpoint) {
+        if (props[breakpoint]) {
+            classList = classList.concat.apply(classList, __spreadArray([], __read(getClassList(props[breakpoint], breakpoint)), false));
+        }
+    });
+    return (_jsx(Box, __assign({ "data-testid": "col" }, filterOwnProps(breakpoints, props), { className: [classList, className, style] }, { children: children }), void 0));
+};
+Col.displayName = 'Col';
+export default Col;

package/esm/grid/Grid.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @author Ivan Torres
+ */
+import { ReactNode } from 'react';
+import { GridProps } from './types';
+export declare type Props = GridProps & {
+    children?: ReactNode | ReactNode[];
+};
+export declare const Grid: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
+    $as?: import("react").ElementType<any> | undefined;
+    className?: import("..").Styles;
+    style?: import("..").Styles;
+} & import("./types").Grid & {
+    lg?: (number | import("./types").Grid) | undefined;
+    md?: (number | import("./types").Grid) | undefined;
+    sm?: (number | import("./types").Grid) | undefined;
+    xl?: (number | import("./types").Grid) | undefined;
+    xs?: (number | import("./types").Grid) | undefined;
+} & {
+    children?: ReactNode | ReactNode[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Grid;

package/esm/grid/Grid.js

@@ -0,0 +1,59 @@
+import { __assign } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @author Ivan Torres
+ */
+import { useMemo, forwardRef } from 'react';
+import { Box } from '../box';
+import useStyle from '../style/useStyle';
+import { filterOwnProps } from './utils';
+export var Grid = forwardRef(function (props, ref) {
+    var theme = useStyle().theme;
+    var screens = theme.screens;
+    var className = props.className, cols = props.cols, rows = props.rows, gap = props.gap, colGap = props.colGap, rowGap = props.rowGap, style = props.style;
+    /* default settings */
+    var classList = ['grid'];
+    if (rows) {
+        classList.push("grid-rows-".concat(rows, " grid-flow-col"));
+    }
+    else {
+        classList.push("grid-cols-".concat(cols || 1, " grid-flow-row"));
+    }
+    if (colGap)
+        classList.push("gap-x-".concat(colGap));
+    if (rowGap)
+        classList.push("gap-y-".concat(rowGap));
+    if (gap && Number.isInteger(gap)) {
+        /* can't combine lang-hand and short-hand */
+        if (colGap) {
+            classList.push("gap-y-".concat(gap));
+        }
+        else if (rowGap) {
+            classList.push("gap-x-".concat(gap));
+        }
+        else {
+            classList.push("gap-".concat(gap));
+        }
+    }
+    var breakpoints = useMemo(function () { return Object.keys(screens); }, [screens]);
+    breakpoints.forEach(function (name) {
+        var breakpoint = props[name];
+        if (!breakpoint)
+            return;
+        if (Number.isInteger(breakpoint))
+            classList.push("".concat(name, ":grid-cols-").concat(breakpoint));
+        if (breakpoint.cols && !breakpoint.rows)
+            classList.push("".concat(name, ":grid-cols-").concat(breakpoint.cols));
+        if (breakpoint.rows && !breakpoint.cols)
+            classList.push("".concat(name, ":grid-rows-").concat(breakpoint.rows));
+        if (breakpoint.gap)
+            classList.push("".concat(name, ":gap-").concat(breakpoint.gap));
+        if (breakpoint.rowGap)
+            classList.push("".concat(name, ":gap-y-").concat(breakpoint.rowGap));
+        if (breakpoint.colGap)
+            classList.push("".concat(name, ":gap-x-").concat(breakpoint.colGap));
+    });
+    return (_jsx(Box, __assign({}, filterOwnProps(breakpoints, props), { className: [classList, className, style], ref: ref }, { children: props.children }), void 0));
+});
+Grid.displayName = 'Grid';
+export default Grid;

package/esm/grid/index.d.ts

@@ -0,0 +1,6 @@
+import { Grid } from './Grid';
+import { Col } from './Col';
+import { GridProps, ColProps } from './types';
+export { Col, Grid };
+export type { ColProps, GridProps };
+export default Grid;

package/esm/grid/index.js

@@ -0,0 +1,4 @@
+import { Grid } from './Grid';
+import { Col } from './Col';
+export { Col, Grid };
+export default Grid;

package/esm/grid/types.d.ts

@@ -0,0 +1,32 @@
+import { SpacewebComponentProps } from '../types';
+export declare type Grid = {
+    cols?: number;
+    rows?: number;
+    gap?: number;
+    colGap?: number;
+    rowGap?: number;
+};
+declare type Breakpoint = number | Grid;
+export declare type GridProps = SpacewebComponentProps & Grid & {
+    lg?: Breakpoint;
+    md?: Breakpoint;
+    sm?: Breakpoint;
+    xl?: Breakpoint;
+    xs?: Breakpoint;
+};
+export declare type Column = {
+    colSpan?: number;
+    colStart?: number;
+    colEnd?: number;
+    rowSpan?: number;
+    rowStart?: number;
+    rowEnd?: number;
+};
+export declare type ColProps = SpacewebComponentProps & Column & {
+    xs?: Column;
+    sm?: Column;
+    md?: Column;
+    lg?: Column;
+    xl?: Column;
+};
+export {};

package/esm/grid/types.js

@@ -0,0 +1 @@
+export {};

package/esm/grid/utils.d.ts

@@ -0,0 +1 @@
+export declare const filterOwnProps: <T>(breakpoints: string[], props: T) => Partial<T>;