@overmap-ai/blocks 1.0.23 → 1.0.25-component-forms.0

package/dist/index.d.ts

@@ -13,7 +13,9 @@ export * from "./Select";
 export * from "./MultiSelect";
 export * from "./Switch";
 export * from "./Sidebar";
+export * from "./Layout";
 export * from "./SlideOut";
+export * from "./SlideOutV3";
 export * from "./Input";
 export * from "./IconColorUtility";
 export * from "./Popover";

package/dist/style.css

@@ -166,66 +166,120 @@
   position: absolute;
   inset: 0;
   background-color: var(--color-overlay);
-}._outerContent_n84eo_1:focus-visible {
-  outline: none;
+}/** CSSTransition Classes for Right SlideOut */
+._EnterRight_1jwyv_2 {
+  margin-right: calc(-1 * var(--slide-out-width));
 }
-._outerContent_n84eo_1._enter_n84eo_4 {
-  pointer-events: none;
+
+._EnterActiveRight_1jwyv_6 {
+  transition: margin-right 200ms linear;
+  margin-right: 0;
 }
-._outerContent_n84eo_1._enter_n84eo_4._right_n84eo_7 {
-  transform: translateX(100%);
-  margin-left: calc(-1 * var(--slide-out-width));
+
+._EnterDoneRight_1jwyv_11 {
+  margin-right: 0;
 }
-._outerContent_n84eo_1._enter_n84eo_4._left_n84eo_11 {
-  transform: translateX(-100%);
+
+._ExitRight_1jwyv_15 {
+  margin-right: 0;
+}
+
+._ExitActiveRight_1jwyv_19 {
+  transition: margin-right 200ms linear;
   margin-right: calc(-1 * var(--slide-out-width));
 }
-._outerContent_n84eo_1._enterActive_n84eo_15 {
-  pointer-events: none;
+
+._ExitDoneRight_1jwyv_24 {
+  margin-right: calc(-1 * var(--slide-out-width));
 }
-._outerContent_n84eo_1._enterActive_n84eo_15._right_n84eo_7 {
-  transition: transform 200ms linear, margin-left 200ms linear;
-  transform: translateX(0);
+
+/** CSSTransition Classes for Left SlideOut */
+._EnterLeft_1jwyv_29 {
+  margin-left: calc(-1 * var(--slide-out-width));
+}
+
+._EnterActiveLeft_1jwyv_33 {
+  transition: margin-left 200ms linear;
   margin-left: 0;
 }
-._outerContent_n84eo_1._enterActive_n84eo_15._left_n84eo_11 {
-  transition: transform 200ms linear, margin-right 200ms linear;
-  transform: translateX(0);
-  margin-right: 0;
+
+._EnterDoneLeft_1jwyv_38 {
+  margin-left: 0;
 }
-._outerContent_n84eo_1._exitActive_n84eo_28 {
-  pointer-events: none;
+
+._ExitLeft_1jwyv_42 {
+  margin-left: 0;
 }
-._outerContent_n84eo_1._exitActive_n84eo_28._right_n84eo_7 {
-  transition: transform 200ms linear, margin-left 200ms linear;
-  transform: translateX(100%);
+
+._ExitActiveLeft_1jwyv_46 {
+  transition: margin-left 200ms linear;
   margin-left: calc(-1 * var(--slide-out-width));
 }
-._outerContent_n84eo_1._exitActive_n84eo_28._left_n84eo_11 {
-  transition: transform 200ms linear, margin-right 200ms linear;
-  transform: translateX(calc(-1 * var(--slide-out-width)));
+
+._ExitDoneLeft_1jwyv_51 {
+  margin-left: calc(-1 * var(--slide-out-width));
+}
+
+/** Other Classes */
+._Overlay_1jwyv_56 {
+  position: absolute;
+  inset: 0;
+}/** CSSTransition Classes for Right SlideOut */
+._EnterRight_1jwyv_2 {
+  margin-right: calc(-1 * var(--slide-out-width));
+}
+
+._EnterActiveRight_1jwyv_6 {
+  transition: margin-right 200ms linear;
+  margin-right: 0;
+}
+
+._EnterDoneRight_1jwyv_11 {
+  margin-right: 0;
+}
+
+._ExitRight_1jwyv_15 {
+  margin-right: 0;
+}
+
+._ExitActiveRight_1jwyv_19 {
+  transition: margin-right 200ms linear;
   margin-right: calc(-1 * var(--slide-out-width));
 }
-._outerContent_n84eo_1._exitDone_n84eo_41 {
-  pointer-events: none;
+
+._ExitDoneRight_1jwyv_24 {
+  margin-right: calc(-1 * var(--slide-out-width));
 }
-._outerContent_n84eo_1._exitDone_n84eo_41._right_n84eo_7 {
-  transform: translateX(100%);
+
+/** CSSTransition Classes for Left SlideOut */
+._EnterLeft_1jwyv_29 {
   margin-left: calc(-1 * var(--slide-out-width));
 }
-._outerContent_n84eo_1._exitDone_n84eo_41._left_n84eo_11 {
-  transform: translateX(-100%);
-  margin-right: calc(-1 * var(--slide-out-width));
+
+._EnterActiveLeft_1jwyv_33 {
+  transition: margin-left 200ms linear;
+  margin-left: 0;
 }
 
-._resizable_n84eo_53 {
-  background-color: var(--color-panel-solid);
-  height: 100% !important;
-  max-height: 100% !important;
+._EnterDoneLeft_1jwyv_38 {
+  margin-left: 0;
+}
+
+._ExitLeft_1jwyv_42 {
+  margin-left: 0;
+}
+
+._ExitActiveLeft_1jwyv_46 {
+  transition: margin-left 200ms linear;
+  margin-left: calc(-1 * var(--slide-out-width));
+}
+
+._ExitDoneLeft_1jwyv_51 {
+  margin-left: calc(-1 * var(--slide-out-width));
 }
 
-._slideOutOverlay_n84eo_59 {
-  background: var(--color-overlay);
+/** Other Classes */
+._Overlay_1jwyv_56 {
   position: absolute;
   inset: 0;
 }._accommodateCharCount_1octa_1 {
@@ -491,12 +545,7 @@
   all: unset;
 }
 
-._checkboxContainer_pb9za_5 {
-  display: flex;
-  align-items: center;
-}
-
-._checkbox_pb9za_5 {
+._checkbox_yl8iy_5 {
   background-color: var(--color-panel-solid);
   width: 15px;
   height: 15px;
@@ -508,12 +557,12 @@
   box-shadow: inset 0 0 0 1px var(--gray-a7);
   cursor: var(--cursor-checkbox);
 }
-._checkbox_pb9za_5 [data-state=checked], ._checkbox_pb9za_5 [data-state=indeterminate] {
+._checkbox_yl8iy_5 [data-state=checked], ._checkbox_yl8iy_5 [data-state=indeterminate] {
   background-color: var(--accent-9);
   color: var(--accent-9-contrast);
 }
 
-._checkboxIndicator_pb9za_27 {
+._checkboxIndicator_yl8iy_22 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -524,11 +573,11 @@
   padding-right: 0.5px;
 }
 
-._checkboxLabel_pb9za_38 {
+._checkboxLabel_yl8iy_33 {
   padding-left: 0.5rem;
 }
 
-._noTextHighlight_pb9za_42 {
+._noTextHighlight_yl8iy_37 {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -537,7 +586,7 @@
   user-select: none;
 }
 
-._checkboxHidden_pb9za_51 {
+._checkboxHidden_yl8iy_46 {
   visibility: hidden;
 }._disabled_5i91d_1 {
   color: var(--gray-a10);

package/dist/typings.d.ts

@@ -1,3 +1,8 @@
+import { CSSProperties } from "react";
 export type Size = "small" | "medium" | "large";
 export type Severity = "primary" | "success" | "danger" | "warning" | "info";
 export type Variant = "solid" | "soft" | "outline" | "ghost" | "surface";
+export interface PropsWithClassNameAndStyle {
+    className?: string;
+    style?: CSSProperties;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@overmap-ai/blocks",
-  "version": "1.0.23",
+  "version": "1.0.25-component-forms.0",
   "description": "A collection of React components for building Overmap's UI.",
   "private": false,
   "author": "Wôrdn Inc.",
@@ -29,6 +29,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-menu": "^2.0.6",
+    "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-toolbar": "^1.0.4",

package/dist/SlideOut/SlideOut.d.ts

@@ -1,40 +0,0 @@
-import { FC, ReactElement } from "react";
-import { DismissableLayerProps } from "@radix-ui/react-dismissable-layer";
-interface SlideOutProps extends Omit<DismissableLayerProps, "disableOutsidePointerEvents"> {
-    /** The controlled state of whether the SlideOut is open or not */
-    open?: boolean;
-    /** Used to specify what side of the container the SlideOut appears on
-     * @default "left"
-     * */
-    side?: "left" | "right";
-    /** The minimum width of the SlideOut, this must be specified and will be the default width the SlideOut
-     * first opens with. Note the developer is responsible for adapting this as the screen size or size of the container
-     * the SlideOut appears in changes in width */
-    minWidth: number;
-    /** An optional max width of the SlideOut when resizing, like minWidth, the Developer is responsible for adapting
-     * this value as the screen size or size of the container of the SlideOut changes width*/
-    maxWidth?: number;
-    /** Renders an overlay with the SlideOut, should be used when the SlideOut should have modality
-     * @default false
-     * */
-    overlay?: boolean;
-    /** Determines if the SlideOut has modality, should be used in combination with overlay
-     * @default false
-     * */
-    modal?: boolean;
-    /** Controls whether the SlideOut can be resized
-     * @default true
-     * */
-    resizable?: boolean;
-    /** Component to be used as the resize handle for the SlideOut */
-    resizeHandle?: ReactElement;
-    /** if set to relative, the SlideOut will push any content contained within its container when open/closed
-     * @default "absolute"
-     * */
-    position?: "absolute" | "relative";
-    overlayClassName?: string;
-}
-/** The SlideOut component is a UI element that allows you to create a slide-in/slide-out effect for content within
- * your application. It provides a smooth transition animation for revealing and hiding content. */
-export declare const SlideOut: FC<SlideOutProps>;
-export {};