@koobiq/react-components 0.0.1 → 0.1.1

package/dist/components/TimePicker/types.d.ts

@@ -0,0 +1,46 @@
+import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { AriaTimeFieldProps, TimeValue } from '@koobiq/react-primitives';
+import type { DateInputPropVariant } from '../DateInput';
+import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputDateProps, FieldInputGroupProps, FieldLabelProps } from '../FieldComponents';
+export type TimePickerProps<T extends TimeValue> = {
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /**
+     * The variant to use.
+     * @default 'filled'
+     */
+    variant?: DateInputPropVariant;
+    /**
+     * If true, the input will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: FieldControlProps;
+        label?: FieldLabelProps;
+        group?: FieldInputGroupProps;
+        caption?: FieldCaptionProps;
+        inputDate?: FieldInputDateProps;
+        errorMessage?: FieldErrorProps;
+    };
+    /** Ref to the control */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+} & AriaTimeFieldProps<T>;
+export type TimePickerComponent = <T extends TimeValue>(props: TimePickerProps<T>) => ReactElement | null;
+export type TimePickerRef = ComponentRef<'div'>;

package/dist/components/Toggle/Toggle.d.ts

@@ -1,6 +1,12 @@
-export declare const Toggle: import("react").ForwardRefExoticComponent<import("@react-types/switch").AriaSwitchProps & {
-    isInvalid?: boolean;
-} & {
+import { type SwitchProps } from '@koobiq/react-primitives';
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<Omit<SwitchProps, "inputRef">, "children" | "style" | "className" | "size" | "slotProps" | "labelPlacement" | keyof {
+    disabled?: boolean;
+    error?: boolean;
+    checked?: boolean;
+    readonly?: boolean;
+    defaultChecked?: boolean;
+}> & {
+    children?: import("react").ReactNode;
     className?: string;
     style?: import("react").CSSProperties;
     size?: import("./types").TogglePropSize;
@@ -9,11 +15,6 @@ export declare const Toggle: import("react").ForwardRefExoticComponent<import("@
         track?: import("react").ComponentPropsWithRef<"span">;
         label?: import("react").ComponentPropsWithRef<"span">;
     };
-    isInvalid?: boolean;
-    isSelected?: boolean;
-    isReadOnly?: boolean;
-    isDisabled?: boolean;
-    defaultSelected?: boolean;
 } & {
     disabled?: boolean;
     error?: boolean;

package/dist/components/Toggle/types.d.ts

@@ -1,5 +1,6 @@
-import type { ComponentPropsWithRef, CSSProperties } from 'react';
-import type { UseSwitchProps } from '@koobiq/react-primitives';
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { SwitchProps } from '@koobiq/react-primitives';
 export declare const togglePropSize: readonly ["normal", "big"];
 export type TogglePropSize = (typeof togglePropSize)[number];
 export declare const togglePropLabelPlacement: readonly ["start", "end"];
@@ -39,7 +40,9 @@ type ToggleDeprecatedProps = {
      */
     defaultChecked?: boolean;
 };
-export type ToggleProps = UseSwitchProps & {
+export type ToggleProps = ExtendableProps<{
+    /** The content of the component. */
+    children?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
     /** Inline styles. */
@@ -59,24 +62,5 @@ export type ToggleProps = UseSwitchProps & {
         track?: ComponentPropsWithRef<'span'>;
         label?: ComponentPropsWithRef<'span'>;
     };
-    /**
-     * If `true`, the component will indicate an error.
-     * @default false
-     */
-    isInvalid?: boolean;
-    /** If `true`, the component is checked. */
-    isSelected?: boolean;
-    /**
-     * It prevents the user from changing the value of the checkbox.
-     * @default false
-     */
-    isReadOnly?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /** The default checked state. Use when the component is not controlled. */
-    defaultSelected?: boolean;
-} & ToggleDeprecatedProps;
+} & ToggleDeprecatedProps, Omit<SwitchProps, 'inputRef'>>;
 export {};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,9 +1,8 @@
-export declare const Tooltip: import("react").ForwardRefExoticComponent<{
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<import("@react-types/tooltip").TooltipTriggerProps, "children" | "className" | "id" | "offset" | "variant" | `data-${string}` | "placement" | "control" | "portalContainer" | "anchorRef" | "hideArrow" | "arrowBoundaryOffset" | "crossOffset" | "delay" | "closeDelay" | keyof {
+    open?: boolean;
+    disabled?: boolean;
+}> & {
     variant?: import("./types").TooltipPropVariant;
-    isOpen?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?(open: boolean): void;
-    isDisabled?: boolean;
     children?: import("react").ReactNode;
     control?: import("./types").TooltipPropControl;
     placement?: import("./types").TooltipPropPlacement;
@@ -14,7 +13,6 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     hideArrow?: boolean;
     delay?: number;
     closeDelay?: number;
-    trigger?: "focus";
     id?: string;
     className?: string;
     portalContainer?: Element;

package/dist/components/Tooltip/types.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode, RefObject, ComponentRef, ReactElement, DOMAttributes } from 'react';
-import type { DataAttributeProps, FocusableElement } from '@koobiq/react-core';
+import type { DataAttributeProps, ExtendableProps, FocusableElement } from '@koobiq/react-core';
+import type { TooltipTriggerProps } from '@koobiq/react-primitives';
 export type TooltipPropControl = (props: DOMAttributes<FocusableElement | null> & {
     ref: ((node: FocusableElement | null) => void) | null;
 }) => ReactElement;
@@ -11,7 +12,7 @@ type TooltipDeprecatedProps = {
     /**
      * If `true`, the component is shown.
      * @default false
-     *
+     * @deprecated
      * The "open" prop is deprecated. Use "isOpen" prop to replace it.
      */
     open?: boolean;
@@ -22,23 +23,12 @@ type TooltipDeprecatedProps = {
      */
     disabled?: boolean;
 };
-export type TooltipProps = {
+export type TooltipProps = ExtendableProps<{
     /**
      * The variant to use.
      * @default 'contrast'
      */
     variant?: TooltipPropVariant;
-    /** If `true`, the component is shown. */
-    isOpen?: boolean;
-    /** The default open state. Use when the component is not controlled. */
-    defaultOpen?: boolean;
-    /** Handler that is called when the overlay's open state changes. */
-    onOpenChange?(open: boolean): void;
-    /**
-     * If `true`, the tooltip should be disabled, independent of the trigger.
-     * @default false
-     */
-    isDisabled?: boolean;
     /** The content of the component. */
     children?: ReactNode;
     /** The render function of the control for displaying the tooltip. */
@@ -82,10 +72,6 @@ export type TooltipProps = {
      * @default 120
      */
     closeDelay?: number;
-    /**
-     * By default, opens for both focus and hover. Can be made to open only for focus.
-     */
-    trigger?: 'focus';
     /**
      * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
      */
@@ -97,6 +83,6 @@ export type TooltipProps = {
      * @default document.body
      */
     portalContainer?: Element;
-} & TooltipDeprecatedProps & DataAttributeProps;
+} & TooltipDeprecatedProps & DataAttributeProps, TooltipTriggerProps>;
 export type TooltipRef = ComponentRef<'div'>;
 export {};

package/dist/components/index.d.ts

@@ -33,6 +33,7 @@ export * from './Table';
 export * from './Calendar';
 export * from './DateInput';
 export * from './DatePicker';
+export * from './TimePicker';
 export * from './layout';
-export { useListData, type ListData, type ListOptions, } from '@koobiq/react-primitives';
+export { useListData, type ListData, type ListOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
 export { useRouter, useLocale, type Locale, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -60,13 +60,11 @@ import { Item } from "./components/Collections/Item.js";
 import { Section } from "./components/Collections/Section.js";
 import { List, ListInner } from "./components/List/List.js";
 import { ListItemText } from "./components/List/components/ListItemText/ListItemText.js";
-import { listPropSelectionMode } from "./components/List/types.js";
 import { AnimatedIcon } from "./components/AnimatedIcon/AnimatedIcon.js";
 import { Select } from "./components/Select/Select.js";
 import { Divider } from "./components/Divider/Divider.js";
-import { dividerPropDisplay, dividerPropOrientation } from "./components/Divider/types.js";
+import { dividerPropDisplay } from "./components/Divider/types.js";
 import { Menu } from "./components/Menu/Menu.js";
-import { menuPropSelectionMode } from "./components/Menu/types.js";
 import { ButtonToggleGroup } from "./components/ButtonToggleGroup/ButtonToggleGroup.js";
 import { ButtonToggle } from "./components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js";
 import { TagGroup } from "./components/TagGroup/TagGroup.js";
@@ -77,6 +75,7 @@ import { Calendar } from "./components/Calendar/Calendar.js";
 import { DateInput, DateInputRender } from "./components/DateInput/DateInput.js";
 import { dateInputPropVariant } from "./components/DateInput/types.js";
 import { DatePicker, DatePickerRender } from "./components/DatePicker/DatePicker.js";
+import { TimePicker, TimePickerRender } from "./components/TimePicker/TimePicker.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -138,6 +137,8 @@ export {
   Tag,
   TagGroup,
   Textarea,
+  TimePicker,
+  TimePickerRender,
   Toggle,
   Tooltip,
   Typography,
@@ -152,7 +153,6 @@ export {
   dateInputPropVariant,
   defaultBreakpoints,
   dividerPropDisplay,
-  dividerPropOrientation,
   flex,
   flexPropAlignItems,
   flexPropDirection,
@@ -166,8 +166,6 @@ export {
   iconButtonPropVariant,
   inputNumberPropVariant,
   inputPropVariant,
-  listPropSelectionMode,
-  menuPropSelectionMode,
   modalPropSize,
   popoverPropPlacement,
   popoverPropSize,

package/dist/style.css

@@ -17,40 +17,6 @@
   --lightningcss-dark: initial;
   color-scheme: dark;
 }
-
-* {
-  --scroll-bar-size: 16px;
-}
-
-*::-webkit-scrollbar {
-  inline-size: var(--scroll-bar-size);
-}
-
-*::-webkit-scrollbar-thumb {
-  border: calc(var(--scroll-bar-size) / 4) solid transparent;
-  border-image: initial;
-  min-block-size: calc(var(--scroll-bar-size) * 2);
-  background-clip: padding-box;
-  background-color: var(--kbq-icon-contrast-fade);
-  border-radius: calc(var(--scroll-bar-size) / 2);
-}
-
-*::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:active {
-  border: calc(var(--scroll-bar-size) / 4) solid transparent;
-  background-clip: padding-box;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  background-color: var(--kbq-states-icon-contrast-fade-hover);
-}
-
-*::-webkit-scrollbar-thumb:active {
-  background-color: var(--kbq-states-icon-contrast-fade-active);
-}
-
-*::-webkit-scrollbar-corner {
-  background: none;
-}
 .kbq-flex-7624b3 {
   --flex-gap: 0;
   --flex-order: 0;
@@ -1377,6 +1343,40 @@
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
+
+.kbq-utility-scrollable-9f9fc8 {
+  --scroll-bar-size: 16px;
+}
+
+.kbq-utility-scrollable-9f9fc8::-webkit-scrollbar {
+  inline-size: var(--scroll-bar-size);
+}
+
+.kbq-utility-scrollable-9f9fc8::-webkit-scrollbar-thumb {
+  border: calc(var(--scroll-bar-size) / 4) solid transparent;
+  border-image: initial;
+  min-block-size: calc(var(--scroll-bar-size) * 2);
+  background-clip: padding-box;
+  background-color: var(--kbq-icon-contrast-fade);
+  border-radius: calc(var(--scroll-bar-size) / 2);
+}
+
+.kbq-utility-scrollable-9f9fc8::-webkit-scrollbar-thumb:hover, .kbq-utility-scrollable-9f9fc8::-webkit-scrollbar-thumb:active {
+  border: calc(var(--scroll-bar-size) / 4) solid transparent;
+  background-clip: padding-box;
+}
+
+.kbq-utility-scrollable-9f9fc8::-webkit-scrollbar-thumb:hover {
+  background-color: var(--kbq-states-icon-contrast-fade-hover);
+}
+
+.kbq-utility-scrollable-9f9fc8::-webkit-scrollbar-thumb:active {
+  background-color: var(--kbq-states-icon-contrast-fade-active);
+}
+
+.kbq-utility-scrollable-9f9fc8::-webkit-scrollbar-corner {
+  background: none;
+}
 .kbq-typography-645b00 {
   margin: unset;
 }
@@ -1508,6 +1508,7 @@
 
 .kbq-checkbox-invalid-253c35 {
   --checkbox-border-color: var(--kbq-line-error);
+  --checkbox-bg-color: var(--kbq-background-error-less);
 }
 
 .kbq-checkbox-invalid-253c35:where(.kbq-checkbox-hovered-a8a95e) {
@@ -3862,31 +3863,38 @@
 .kbq-fieldinputdate-transparent-04d912:where(.kbq-fieldinputdate-disabled-692832) {
   --field-input-color: var(--kbq-states-foreground-disabled);
 }
-.kbq-dateinputsegment-996e10 {
+.kbq-datesegment-3b7153 {
   --date-input-segment-color: var(--field-input-color);
   color: var(--date-input-segment-color);
 }
 
-.kbq-dateinputsegment-996e10:focus {
+.kbq-datesegment-3b7153:focus {
   color: var(--date-input-segment-color);
   background-color: highlight;
   outline: none;
 }
 
-.kbq-dateinputsegment-placeholder-be1df1 {
+.kbq-datesegment-placeholder-b233e5 {
   color: var(--field-input-placeholder-color);
 }
 
-.kbq-dateinputsegment-literal-d722fc {
+.kbq-datesegment-literal-a4b534 {
   white-space: pre;
 }
 
-.kbq-dateinputsegment-literal-d722fc:not(.kbq-dateinputsegment-hasValue-886d0f) {
+.kbq-datesegment-literal-a4b534:not(.kbq-datesegment-hasValue-800714) {
   color: var(--field-input-placeholder-color);
 }
 .kbq-datepicker-calendar-25a0d7 {
   margin-inline-end: calc(-1 * var(--kbq-size-xxs));
 }
+.kbq-timepicker-a6e9f3 {
+  min-inline-size: 150px;
+}
+
+.kbq-timepicker-startAddon-46c835 {
+  pointer-events: none;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/dist/styles/utility.d.ts

@@ -70,4 +70,5 @@ export declare const utilClasses: {
     };
     list: string;
     listItem: string;
+    scrollable: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/react-core": "0.0.1",
-    "@koobiq/react-primitives": "0.0.1",
-    "@koobiq/logger": "0.0.1",
-    "@koobiq/react-icons": "0.0.1"
+    "@koobiq/logger": "0.1.1",
+    "@koobiq/react-icons": "0.1.1",
+    "@koobiq/react-core": "0.1.1",
+    "@koobiq/react-primitives": "0.1.1"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",

package/dist/components/DateInput/components/DateInputSegment/DateInputSegment.d.ts

@@ -1,7 +0,0 @@
-import type { DateSegment, DateFieldState } from '@koobiq/react-primitives';
-type DateInputSegmentProps = {
-    segment: DateSegment;
-    state: DateFieldState;
-};
-export declare function DateInputSegment({ segment, state }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/DateInput/components/DateInputSegment/DateInputSegment.js

@@ -1,27 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useRef } from "react";
-import { clsx } from "@koobiq/react-core";
-import { useDateSegment } from "@koobiq/react-primitives";
-import s from "./DateInputSegment.module.css.js";
-function DateInputSegment({ segment, state }) {
-  const ref = useRef(null);
-  const { segmentProps } = useDateSegment(segment, state, ref);
-  const { text, isPlaceholder, type } = segment;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ...segmentProps,
-      ref,
-      className: clsx(
-        s.base,
-        s[type],
-        state.value !== null && s.hasValue,
-        isPlaceholder && s.placeholder
-      ),
-      children: text
-    }
-  );
-}
-export {
-  DateInputSegment
-};

package/dist/components/DateInput/components/DateInputSegment/DateInputSegment.module.css.js

@@ -1,17 +0,0 @@
-const base = "kbq-dateinputsegment-996e10";
-const placeholder = "kbq-dateinputsegment-placeholder-be1df1";
-const literal = "kbq-dateinputsegment-literal-d722fc";
-const hasValue = "kbq-dateinputsegment-hasValue-886d0f";
-const s = {
-  base,
-  placeholder,
-  literal,
-  hasValue
-};
-export {
-  base,
-  s as default,
-  hasValue,
-  literal,
-  placeholder
-};

package/dist/components/DateInput/components/DateInputSegment/index.d.ts

@@ -1 +0,0 @@
-export * from './DateInputSegment';

package/dist/components/DateInput/components/index.d.ts

@@ -1 +0,0 @@
-export * from './DateInputSegment';

package/dist/components/List/types.js

@@ -1,4 +0,0 @@
-const listPropSelectionMode = ["none", "single", "multiple"];
-export {
-  listPropSelectionMode
-};

package/dist/components/Menu/types.js

@@ -1,4 +0,0 @@
-const menuPropSelectionMode = ["none", "single", "multiple"];
-export {
-  menuPropSelectionMode
-};