@nattstack/ui 0.0.1 → 0.0.3

package/dist/{button.module-77AJOXGM.module.css → components/button.module-EYMY7VLZ.module.css}

@@ -11,7 +11,7 @@
   font-family: var(--font-sans, sans-serif);
   font-size: 14px;
   font-weight: 500;
-  height: var(--size);
+  height: var(--size-button);
   justify-content: safe center;
   line-height: 1.5;
   outline-color: var(--color-primary-9);
@@ -41,11 +41,18 @@
   outline-width: 2px;
 }
 
+/* Icon size */
+.button > svg {
+  --size-icon: 18px;
+  height: var(--size-icon);
+  width: var(--size-icon);
+}
+
 /* ===================================================== */
 /* Icon only */
 /* ===================================================== */
 .button__icon_only {
-  width: var(--size) !important;
+  width: var(--size-button) !important;
   padding: 0 !important;
 }
 
@@ -64,31 +71,31 @@
 /* Size */
 /* ===================================================== */
 .button__size_32 {
-  --size: 32px;
+  --size-button: 32px;
   padding: 0 10px;
   border-radius: 8px;
 }
 
 .button__size_36 {
-  --size: 36px;
+  --size-button: 36px;
   padding: 0 12px;
   border-radius: 10px;
 }
 
 .button__size_40 {
-  --size: 40px;
+  --size-button: 40px;
   padding: 0 14px;
   border-radius: 12px;
 }
 
 .button__size_44 {
-  --size: 44px;
+  --size-button: 44px;
   padding: 0 16px;
   border-radius: 14px;
 }
 
 .button__size_48 {
-  --size: 48px;
+  --size-button: 48px;
   padding: 0 18px;
   border-radius: 16px;
 }

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

@@ -0,0 +1,27 @@
+.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-popup.module-BOEQIHJ7.module.css

@@ -0,0 +1,58 @@
+.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;
+  padding: 16px;
+  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);
+    padding-top: 0;
+    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,5 @@
 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;
@@ -9,7 +8,7 @@ interface ButtonIconProps extends ButtonInternalProps {
     isIconOnly: true;
 }
 interface ButtonProps extends ButtonInternalProps {
-    children?: string | string[];
+    children?: number | number[] | string | string[];
     isIconOnly?: false;
 }
 interface ButtonInternalProps extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
@@ -73,6 +72,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): JSX.Element;
+
+interface DialogResponsivePopupProps extends Drawer.Popup.Props {
+}
+declare function DialogResponsivePopup(props: DialogResponsivePopupProps): JSX.Element;
+declare const DIALOG_RESPONSIVE_POPUP_CLASS_NAME: {
+    readonly BASE: string;
+};
+
+interface DialogResponsiveTriggerProps extends Drawer.Trigger.Props {
+}
+declare function DialogResponsiveTrigger(props: DialogResponsiveTriggerProps): JSX.Element;
+
 interface InputProps extends Omit<ComponentProps<"input">, "aria-pressed" | "disabled" | "readOnly" | "required"> {
     isActive?: boolean;
     isDisabled?: boolean;
@@ -126,7 +142,7 @@ interface SpacerProps extends Omit<ComponentProps<"div">, "children"> {
     height?: CSSProperties["height"];
     width?: CSSProperties["width"];
 }
-declare function Spacer(props: SpacerProps): react_jsx_runtime.JSX.Element;
+declare function Spacer(props: SpacerProps): JSX.Element;
 declare const SPACER_CLASS_NAME: {
     readonly BASE: string;
 };
@@ -150,7 +166,7 @@ declare const SWITCH_CLASS_NAME: {
 
 interface TabsPillListProps extends Tabs$1.List.Props {
 }
-declare function TabsPillList(props: TabsPillListProps): react_jsx_runtime.JSX.Element;
+declare function TabsPillList(props: TabsPillListProps): JSX.Element;
 declare const TABS_PILL_LIST_CLASS_NAME: {
     readonly BASE: string;
 };
@@ -158,7 +174,7 @@ declare const TABS_PILL_LIST_CLASS_NAME: {
 interface TabsPillTabProps extends Omit<Tabs$1.Tab.Props, "nativeButton"> {
     isNativeButton?: Tabs$1.Tab.Props["nativeButton"];
 }
-declare function TabsPillTab(props: TabsPillTabProps): react_jsx_runtime.JSX.Element;
+declare function TabsPillTab(props: TabsPillTabProps): JSX.Element;
 declare const TABS_PILL_TAB_CLASS_NAME: {
     readonly BACKGROUND: string;
     readonly BASE: string;
@@ -167,7 +183,7 @@ declare const TABS_PILL_TAB_CLASS_NAME: {
 
 interface TabsSegmentedListProps extends Tabs$1.List.Props {
 }
-declare function TabsSegmentedList(props: TabsSegmentedListProps): react_jsx_runtime.JSX.Element;
+declare function TabsSegmentedList(props: TabsSegmentedListProps): JSX.Element;
 declare const TABS_SEGMENTED_LIST_CLASS_NAME: {
     readonly BASE: string;
 };
@@ -175,14 +191,14 @@ declare const TABS_SEGMENTED_LIST_CLASS_NAME: {
 interface TabsSegmentedTabProps extends Omit<Tabs$1.Tab.Props, "nativeButton"> {
     isNativeButton?: Tabs$1.Tab.Props["nativeButton"];
 }
-declare function TabsSegmentedTab(props: TabsSegmentedTabProps): react_jsx_runtime.JSX.Element;
+declare function TabsSegmentedTab(props: TabsSegmentedTabProps): JSX.Element;
 declare const TABS_SEGMENTED_TAB_CLASS_NAME: {
     readonly BASE: string;
 };
 
 interface TabsUnderlineListProps extends Tabs$1.List.Props {
 }
-declare function TabsUnderlineList(props: TabsUnderlineListProps): react_jsx_runtime.JSX.Element;
+declare function TabsUnderlineList(props: TabsUnderlineListProps): JSX.Element;
 declare const TABS_UNDERLINE_LIST_CLASS_NAME: {
     readonly BASE: string;
 };
@@ -190,21 +206,21 @@ declare const TABS_UNDERLINE_LIST_CLASS_NAME: {
 interface TabsUnderlineTabProps extends Omit<Tabs$1.Tab.Props, "nativeButton"> {
     isNativeButton?: Tabs$1.Tab.Props["nativeButton"];
 }
-declare function TabsUnderlineTab(props: TabsUnderlineTabProps): react_jsx_runtime.JSX.Element;
+declare function TabsUnderlineTab(props: TabsUnderlineTabProps): JSX.Element;
 declare const TABS_UNDERLINE_TAB_CLASS_NAME: {
     readonly BASE: string;
 };
 
 interface TabsProps extends Tabs$1.Root.Props {
 }
-declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;
+declare function Tabs(props: TabsProps): JSX.Element;
 declare const TABS_CLASS_NAME: {
     readonly BASE: string;
 };
 
 interface TabsPanelProps extends Tabs$1.Panel.Props {
 }
-declare function TabsPanel(props: TabsPanelProps): react_jsx_runtime.JSX.Element;
+declare function TabsPanel(props: TabsPanelProps): JSX.Element;
 declare const TABS_PANEL_CLASS_NAME: {
     readonly BASE: string;
 };
@@ -230,21 +246,21 @@ declare const TEXTAREA_CLASS_NAME: {
 
 interface TooltipProps extends Tooltip$1.Root.Props {
 }
-declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip(props: TooltipProps): JSX.Element;
 
 interface TooltipContentProps extends Pick<Tooltip$1.Positioner.Props, "side">, Tooltip$1.Popup.Props {
 }
-declare function TooltipContent(props: TooltipContentProps): react_jsx_runtime.JSX.Element;
+declare function TooltipContent(props: TooltipContentProps): JSX.Element;
 declare const TOOLTIP_CONTENT_CLASS_NAME: {
     readonly BASE: string;
 };
 
 interface TooltipProviderProps extends Tooltip$1.Provider.Props {
 }
-declare function TooltipProvider(props: TooltipProviderProps): react_jsx_runtime.JSX.Element;
+declare function TooltipProvider(props: TooltipProviderProps): JSX.Element;
 
 interface TooltipTriggerProps extends Tooltip$1.Trigger.Props {
 }
-declare function TooltipTrigger(props: TooltipTriggerProps): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger(props: TooltipTriggerProps): 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_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, type DialogResponsivePopupProps, 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 };