@nattstack/ui 0.0.1 → 0.0.2

package/dist/components/dialog-responsive-backdrop.module-UZSAJFQZ.module.css

@@ -0,0 +1,28 @@
+.dialog_responsive_backdrop {
+  --backdrop-opacity: 0.25;
+
+  background-color: black;
+  inset: 0;
+  opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
+  outline-color: var(--color-primary-9);
+  position: fixed;
+  transition-duration: 150ms;
+  transition-property: opacity;
+}
+
+.dialog_responsive_backdrop[data-ending-style],
+.dialog_responsive_backdrop[data-starting-style] {
+  opacity: 0;
+}
+
+.dialog_responsive_backdrop[data-ending-style] {
+  transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
+}
+
+.dialog_responsive_backdrop[data-swiping] {
+  transition-duration: 0ms;
+}
+
+:global(.dark) .dialog_responsive_backdrop {
+  --backdrop-opacity: 0.75;
+}

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

@@ -0,0 +1,14 @@
+.dialog_responsive_bar {
+  background-color: var(--color-gray-4);
+  border-radius: 9999px;
+  display: none;
+  height: 4px;
+  margin: 12px auto;
+  width: 48px;
+}
+
+@media (max-width: 640px) {
+  .dialog_responsive_bar {
+    display: block;
+  }
+}

package/dist/components/dialog-responsive-content.module-NBSLRMHN.module.css

@@ -0,0 +1,11 @@
+.dialog_responsive_content {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+
+@media (max-width: 640px) {
+  .dialog_responsive_content {
+    padding-top: 0;
+  }
+}

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

@@ -0,0 +1,57 @@
+.dialog_responsive_popup {
+  background-color: var(--color-gray-1);
+  border-radius: 16px;
+  cursor: auto;
+  display: flex;
+  flex-direction: column;
+  max-width: 640px;
+  outline-color: var(--color-primary-9);
+  outline-offset: -4px;
+  outline-style: solid;
+  outline-width: 0;
+  transition-duration: 150ms;
+  transition-property: opacity, transform;
+  width: 100%;
+  will-change: opacity, transform;
+}
+
+.dialog_responsive_popup:focus-visible {
+  outline-width: 2px;
+}
+
+/* Desktop */
+.dialog_responsive_popup[data-ending-style],
+.dialog_responsive_popup[data-starting-style] {
+  opacity: 0;
+  transform: scale(0.975);
+}
+
+.dialog_responsive_popup[data-swiping] {
+  user-select: none;
+}
+
+/* Mobile */
+@media (max-width: 640px) {
+  .dialog_responsive_popup {
+    --radius-mobile: 24px;
+
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: var(--radius-mobile);
+    border-top-right-radius: var(--radius-mobile);
+    transform: translateY(var(--drawer-swipe-movement-y));
+    transition-duration: 450ms;
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .dialog_responsive_popup[data-ending-style],
+  .dialog_responsive_popup[data-starting-style] {
+    opacity: 1;
+    transform: scale(1) translateY(100%);
+  }
+
+  .dialog_responsive_popup[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * 300ms);
+  }
+}

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

@@ -0,0 +1,5 @@
+.dialog_responsive_portal {
+  isolation: isolate;
+  position: relative;
+  z-index: 30;
+}

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

@@ -0,0 +1,16 @@
+.dialog_responsive_viewport {
+  align-items: safe center;
+  cursor: pointer;
+  display: flex;
+  inset: 0;
+  justify-content: safe center;
+  padding: 24px;
+  position: fixed;
+}
+
+@media (max-width: 640px) {
+  .dialog_responsive_viewport {
+    align-items: safe flex-end;
+    padding: 48px 0 0;
+  }
+}

package/dist/{index.d.ts → components/index.d.ts}

@@ -1,6 +1,6 @@
 import { ComponentProps, ReactNode, JSX, ElementType, CSSProperties } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from '@base-ui/react';
+import { Drawer, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from '@base-ui/react';
 
 interface ButtonIconProps extends ButtonInternalProps {
     children?: ReactNode;
@@ -73,6 +73,23 @@ declare const COLUMN_CLASS_NAME: {
     readonly BASE: string;
 };
 
+interface DialogResponsiveProps extends Omit<Drawer.Root.Props, "onOpenChange" | "open"> {
+    isOpen?: Drawer.Root.Props["open"];
+    onIsOpenChange?: Drawer.Root.Props["onOpenChange"];
+}
+declare function DialogResponsive(props: DialogResponsiveProps): react_jsx_runtime.JSX.Element;
+
+interface DialogResponsiveContentProps extends Drawer.Content.Props {
+}
+declare function DialogResponsiveContent(props: DialogResponsiveContentProps): react_jsx_runtime.JSX.Element;
+declare const DIALOG_RESPONSIVE_CONTENT_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface DialogResponsiveTriggerProps extends Drawer.Trigger.Props {
+}
+declare function DialogResponsiveTrigger(props: DialogResponsiveTriggerProps): react_jsx_runtime.JSX.Element;
+
 interface InputProps extends Omit<ComponentProps<"input">, "aria-pressed" | "disabled" | "readOnly" | "required"> {
     isActive?: boolean;
     isDisabled?: boolean;
@@ -247,4 +264,4 @@ interface TooltipTriggerProps extends Tooltip$1.Trigger.Props {
 }
 declare function TooltipTrigger(props: TooltipTriggerProps): react_jsx_runtime.JSX.Element;
 
-export { BUTTON_CLASS_NAME, Button, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, COLUMN_CLASS_NAME, Column, type ColumnProps, INPUT_CLASS_NAME, Input, type InputProps, LABEL_CLASS_NAME, Label, type LabelProps, ROW_CLASS_NAME, Row, type RowProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, type SpacerProps, Switch, type SwitchProps, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, type TabsPanelProps, TabsPillList, type TabsPillListProps, TabsPillTab, type TabsPillTabProps, type TabsProps, TabsSegmentedList, type TabsSegmentedListProps, TabsSegmentedTab, type TabsSegmentedTabProps, TabsUnderlineList, type TabsUnderlineListProps, TabsUnderlineTab, type TabsUnderlineTabProps, Textarea, type TextareaProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps };
+export { BUTTON_CLASS_NAME, Button, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, COLUMN_CLASS_NAME, Column, type ColumnProps, DIALOG_RESPONSIVE_CONTENT_CLASS_NAME, DialogResponsive, DialogResponsiveContent, type DialogResponsiveContentProps, type DialogResponsiveProps, DialogResponsiveTrigger, type DialogResponsiveTriggerProps, INPUT_CLASS_NAME, Input, type InputProps, LABEL_CLASS_NAME, Label, type LabelProps, ROW_CLASS_NAME, Row, type RowProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, type SpacerProps, Switch, type SwitchProps, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, type TabsPanelProps, TabsPillList, type TabsPillListProps, TabsPillTab, type TabsPillTabProps, type TabsProps, TabsSegmentedList, type TabsSegmentedListProps, TabsSegmentedTab, type TabsSegmentedTabProps, TabsUnderlineList, type TabsUnderlineListProps, TabsUnderlineTab, type TabsUnderlineTabProps, Textarea, type TextareaProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps };