@nattstack/ui 0.0.85 → 0.0.87

package/dist/components/dialog-responsive/dialog-responsive-backdrop.module.js

@@ -0,0 +1,5 @@
+import './dialog-responsive-backdrop.css';
+//#region src/components/dialog-responsive/dialog-responsive-backdrop.module.css
+var dialog_responsive_backdrop_module_default = { "dialog_responsive_backdrop": "dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq" };
+//#endregion
+export { dialog_responsive_backdrop_module_default as default };

package/dist/components/dialog-responsive/dialog-responsive-bar.css

@@ -0,0 +1,16 @@
+@layer components {
+  .dialog-responsive-bar-module_dialog_responsive_bar_iUwUCq {
+    background-color: var(--color-gray-4);
+    border-radius: 9999px;
+    width: 48px;
+    height: 4px;
+    margin: 12px auto;
+    display: none;
+  }
+
+  @media (width <= 640px) {
+    .dialog-responsive-bar-module_dialog_responsive_bar_iUwUCq {
+      display: block;
+    }
+  }
+}

package/dist/components/dialog-responsive/dialog-responsive-bar.js

@@ -0,0 +1,15 @@
+import dialog_responsive_bar_module_default from "./dialog-responsive-bar.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/dialog-responsive/dialog-responsive-bar.tsx
+function DialogResponsiveBar(props) {
+	const { className: customClassName = "", ...rest } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: dialogResponsiveBarVariants({ className: customClassName }),
+		"data-slot": "dialog-responsive-bar",
+		...rest
+	});
+}
+const dialogResponsiveBarVariants = cva(dialog_responsive_bar_module_default.dialog_responsive_bar);
+//#endregion
+export { DialogResponsiveBar, dialogResponsiveBarVariants };

package/dist/components/dialog-responsive/dialog-responsive-bar.module.js

@@ -0,0 +1,5 @@
+import './dialog-responsive-bar.css';
+//#region src/components/dialog-responsive/dialog-responsive-bar.module.css
+var dialog_responsive_bar_module_default = { "dialog_responsive_bar": "dialog-responsive-bar-module_dialog_responsive_bar_iUwUCq" };
+//#endregion
+export { dialog_responsive_bar_module_default as default };

package/dist/components/dialog-responsive/dialog-responsive-popup.css

@@ -0,0 +1,56 @@
+@layer components {
+  .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq {
+    background-color: var(--color-gray-1);
+    cursor: auto;
+    outline-color: var(--color-primary-9);
+    outline-offset: -4px;
+    will-change: opacity, transform;
+    border-radius: 16px;
+    outline-width: 0;
+    outline-style: solid;
+    flex-direction: column;
+    width: 100%;
+    max-width: 640px;
+    padding: 16px;
+    transition-property: opacity, transform;
+    transition-duration: .15s;
+    display: flex;
+  }
+
+  .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq:focus-visible {
+    outline-width: 2px;
+  }
+
+  .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-ending-style], .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-starting-style] {
+    opacity: 0;
+    transform: scale(.975);
+  }
+
+  .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-swiping] {
+    user-select: none;
+  }
+
+  @media (width <= 640px) {
+    .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq {
+      --radius-mobile: 24px;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-left-radius: var(--radius-mobile);
+      border-top-right-radius: var(--radius-mobile);
+      transform: translateY(var(--drawer-swipe-movement-y));
+      padding-top: 0;
+      transition-property: transform;
+      transition-duration: .45s;
+      transition-timing-function: cubic-bezier(.32, .72, 0, 1);
+    }
+
+    .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-ending-style], .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-starting-style] {
+      opacity: 1;
+      transform: scale(1) translateY(100%);
+    }
+
+    .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-ending-style] {
+      transition-duration: calc(var(--drawer-swipe-strength) * .3s);
+    }
+  }
+}

package/dist/components/dialog-responsive/dialog-responsive-popup.d.ts

@@ -0,0 +1,8 @@
+import { Drawer } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/dialog-responsive/dialog-responsive-popup.d.ts
+interface DialogResponsivePopupProps extends Drawer.Popup.Props {}
+declare function DialogResponsivePopup(props: DialogResponsivePopupProps): JSX.Element;
+declare const dialogResponsivePopupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { DialogResponsivePopup, DialogResponsivePopupProps, dialogResponsivePopupVariants };

package/dist/components/dialog-responsive/dialog-responsive-popup.js

@@ -0,0 +1,22 @@
+import { DialogResponsiveBackdrop } from "./dialog-responsive-backdrop.js";
+import { DialogResponsiveBar } from "./dialog-responsive-bar.js";
+import { DialogResponsivePortal } from "./dialog-responsive-portal.js";
+import { DialogResponsiveViewport } from "./dialog-responsive-viewport.js";
+import dialog_responsive_popup_module_default from "./dialog-responsive-popup.module.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog-responsive/dialog-responsive-popup.tsx
+function DialogResponsivePopup(props) {
+	const { children, className: customClassName = "", ...rest } = props;
+	const combinedClassName = dialogResponsivePopupVariants({ className: customClassName });
+	return /* @__PURE__ */ jsxs(DialogResponsivePortal, { children: [/* @__PURE__ */ jsx(DialogResponsiveBackdrop, {}), /* @__PURE__ */ jsx(DialogResponsiveViewport, { children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+		className: combinedClassName,
+		"data-slot": "dialog-responsive-popup",
+		...rest,
+		children: [/* @__PURE__ */ jsx(DialogResponsiveBar, {}), children]
+	}) })] });
+}
+const dialogResponsivePopupVariants = cva(dialog_responsive_popup_module_default.dialog_responsive_popup);
+//#endregion
+export { DialogResponsivePopup, dialogResponsivePopupVariants };

package/dist/components/dialog-responsive/dialog-responsive-popup.module.js

@@ -0,0 +1,5 @@
+import './dialog-responsive-popup.css';
+//#region src/components/dialog-responsive/dialog-responsive-popup.module.css
+var dialog_responsive_popup_module_default = { "dialog_responsive_popup": "dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq" };
+//#endregion
+export { dialog_responsive_popup_module_default as default };

package/dist/components/dialog-responsive/dialog-responsive-portal.css

@@ -0,0 +1,7 @@
+@layer components {
+  .dialog-responsive-portal-module_dialog_responsive_portal_keH0Tq {
+    isolation: isolate;
+    z-index: 30;
+    position: relative;
+  }
+}

package/dist/components/dialog-responsive/dialog-responsive-portal.js

@@ -0,0 +1,17 @@
+import dialog_responsive_portal_module_default from "./dialog-responsive-portal.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog-responsive/dialog-responsive-portal.tsx
+function DialogResponsivePortal(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = dialogResponsivePortalVariants({ className: customClassName });
+	return /* @__PURE__ */ jsx(Drawer.Portal, {
+		className: combinedClassName,
+		"data-slot": "dialog-responsive-portal",
+		...rest
+	});
+}
+const dialogResponsivePortalVariants = cva(dialog_responsive_portal_module_default.dialog_responsive_portal);
+//#endregion
+export { DialogResponsivePortal, dialogResponsivePortalVariants };

package/dist/components/dialog-responsive/dialog-responsive-portal.module.js

@@ -0,0 +1,5 @@
+import './dialog-responsive-portal.css';
+//#region src/components/dialog-responsive/dialog-responsive-portal.module.css
+var dialog_responsive_portal_module_default = { "dialog_responsive_portal": "dialog-responsive-portal-module_dialog_responsive_portal_keH0Tq" };
+//#endregion
+export { dialog_responsive_portal_module_default as default };

package/dist/components/dialog-responsive/dialog-responsive-trigger.d.ts

@@ -0,0 +1,7 @@
+import { Drawer } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/dialog-responsive/dialog-responsive-trigger.d.ts
+interface DialogResponsiveTriggerProps extends Drawer.Trigger.Props {}
+declare function DialogResponsiveTrigger(props: DialogResponsiveTriggerProps): JSX.Element;
+//#endregion
+export { DialogResponsiveTrigger, DialogResponsiveTriggerProps };

package/dist/components/dialog-responsive/dialog-responsive-trigger.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog-responsive/dialog-responsive-trigger.tsx
+function DialogResponsiveTrigger(props) {
+	const { ...rest } = props;
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "dialog-responsive-trigger",
+		...rest
+	});
+}
+//#endregion
+export { DialogResponsiveTrigger };

package/dist/components/dialog-responsive/dialog-responsive-viewport.css

@@ -0,0 +1,18 @@
+@layer components {
+  .dialog-responsive-viewport-module_dialog_responsive_viewport_b5ZINa {
+    cursor: pointer;
+    justify-content: safe center;
+    align-items: safe center;
+    padding: 24px;
+    display: flex;
+    position: fixed;
+    inset: 0;
+  }
+
+  @media (width <= 640px) {
+    .dialog-responsive-viewport-module_dialog_responsive_viewport_b5ZINa {
+      align-items: safe flex-end;
+      padding: 48px 0 0;
+    }
+  }
+}

package/dist/components/dialog-responsive/dialog-responsive-viewport.js

@@ -0,0 +1,17 @@
+import dialog_responsive_viewport_module_default from "./dialog-responsive-viewport.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog-responsive/dialog-responsive-viewport.tsx
+function DialogResponsiveViewport(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = dialogResponsiveViewportVariants({ className: customClassName });
+	return /* @__PURE__ */ jsx(Drawer.Viewport, {
+		className: combinedClassName,
+		"data-slot": "dialog-responsive-viewport",
+		...rest
+	});
+}
+const dialogResponsiveViewportVariants = cva(dialog_responsive_viewport_module_default.dialog_responsive_viewport);
+//#endregion
+export { DialogResponsiveViewport, dialogResponsiveViewportVariants };

package/dist/components/dialog-responsive/dialog-responsive-viewport.module.js

@@ -0,0 +1,5 @@
+import './dialog-responsive-viewport.css';
+//#region src/components/dialog-responsive/dialog-responsive-viewport.module.css
+var dialog_responsive_viewport_module_default = { "dialog_responsive_viewport": "dialog-responsive-viewport-module_dialog_responsive_viewport_b5ZINa" };
+//#endregion
+export { dialog_responsive_viewport_module_default as default };

package/dist/components/dialog-responsive/dialog-responsive.d.ts

@@ -0,0 +1,10 @@
+import { Drawer } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/dialog-responsive/dialog-responsive.d.ts
+interface DialogResponsiveProps extends Omit<Drawer.Root.Props, "onOpenChange" | "open"> {
+  isOpen?: Drawer.Root.Props["open"];
+  onIsOpenChange?: Drawer.Root.Props["onOpenChange"];
+}
+declare function DialogResponsive(props: DialogResponsiveProps): JSX.Element;
+//#endregion
+export { DialogResponsive, DialogResponsiveProps };

package/dist/components/dialog-responsive/dialog-responsive.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog-responsive/dialog-responsive.tsx
+function DialogResponsive(props) {
+	const { isOpen, onIsOpenChange, ...rest } = props;
+	return /* @__PURE__ */ jsx(Drawer.Root, {
+		"data-slot": "dialog-responsive",
+		onOpenChange: onIsOpenChange,
+		open: isOpen,
+		swipeDirection: "down",
+		...rest
+	});
+}
+//#endregion
+export { DialogResponsive };

package/dist/components/icon-button/icon-button.css

@@ -0,0 +1,21 @@
+@layer components {
+  .icon-button-module_size_32_gxECxa {
+    width: 32px;
+  }
+
+  .icon-button-module_size_36_gxECxa {
+    width: 36px;
+  }
+
+  .icon-button-module_size_40_gxECxa {
+    width: 40px;
+  }
+
+  .icon-button-module_size_44_gxECxa {
+    width: 44px;
+  }
+
+  .icon-button-module_size_48_gxECxa {
+    width: 48px;
+  }
+}

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,12 @@
+import { ButtonProps } from "../button/button.js";
+import { JSX, ReactNode } from "react";
+//#region src/components/icon-button/icon-button.d.ts
+interface IconButtonProps extends Omit<ButtonProps, "iconEnd" | "iconStart" | "isFullWidth" | "label"> {
+  icon?: ReactNode;
+}
+declare function IconButton(props: IconButtonProps): JSX.Element;
+declare const iconButton: (props?: ({
+  size?: 32 | 36 | 40 | 44 | 48 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { IconButton, IconButtonProps, iconButton };

package/dist/components/icon-button/icon-button.js

@@ -0,0 +1,34 @@
+import { ButtonSpinner } from "../button/button-spinner.js";
+import { button } from "../button/button.js";
+import icon_button_module_default from "./icon-button.module.js";
+import { cva, cx } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/icon-button/icon-button.tsx
+function IconButton(props) {
+	const { className = "", icon = "", isDisabled = false, isLoading = false, isRounded = false, variant = "primary", size = 40, ...rest } = props;
+	return /* @__PURE__ */ jsxs("button", {
+		className: cx(button({
+			isDisabled,
+			isLoading,
+			isRounded,
+			size,
+			variant
+		}), iconButton({
+			className,
+			size
+		})),
+		disabled: isDisabled || isLoading,
+		type: "button",
+		...rest,
+		children: [isLoading && /* @__PURE__ */ jsx(ButtonSpinner, {}), icon]
+	});
+}
+const iconButton = cva("", { variants: { size: {
+	32: icon_button_module_default.size_32,
+	36: icon_button_module_default.size_36,
+	40: icon_button_module_default.size_40,
+	44: icon_button_module_default.size_44,
+	48: icon_button_module_default.size_48
+} } });
+//#endregion
+export { IconButton, iconButton };

package/dist/components/icon-button/icon-button.module.js

@@ -0,0 +1,11 @@
+import './icon-button.css';
+//#region src/components/icon-button/icon-button.module.css
+var icon_button_module_default = {
+	"size_32": "icon-button-module_size_32_gxECxa",
+	"size_36": "icon-button-module_size_36_gxECxa",
+	"size_40": "icon-button-module_size_40_gxECxa",
+	"size_44": "icon-button-module_size_44_gxECxa",
+	"size_48": "icon-button-module_size_48_gxECxa"
+};
+//#endregion
+export { icon_button_module_default as default };