@nattstack/ui 0.0.34 → 0.0.36

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ComponentProps, ElementType, JSX, ReactNode } from "react";
-import { Drawer, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
+import { Drawer, OTPFieldPreview, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
 
 //#region src/components/button/button.d.ts
 interface ButtonIconProps extends ButtonInternalProps {
@@ -126,6 +126,24 @@ declare const LABEL_CLASS_NAME: {
   readonly BASE: string;
 };
 //#endregion
+//#region src/components/passcode/passcode.d.ts
+interface PasscodeProps extends Omit<OTPFieldPreview.Root.Props, "disabled"> {
+  isDisabled?: OTPFieldPreview.Root.Props["disabled"];
+}
+declare function Passcode(props: PasscodeProps): JSX.Element;
+declare const PASSCODE_CLASS_NAME: {
+  readonly BASE: string;
+};
+//#endregion
+//#region src/components/passcode/passcode-input.d.ts
+interface PasscodeInputProps extends Omit<OTPFieldPreview.Input.Props, "disabled"> {
+  isDisabled?: OTPFieldPreview.Input.Props["disabled"];
+}
+declare function PasscodeInput(props: PasscodeInputProps): JSX.Element;
+declare const PASSCODE_INPUT_CLASS_NAME: {
+  readonly BASE: string;
+};
+//#endregion
 //#region src/components/row/row.d.ts
 type RowProps<ComponentType extends ElementType = "div"> = ComponentProps<ComponentType> & RowInternalProps;
 interface RowInternalProps {
@@ -275,4 +293,4 @@ declare function TooltipProvider(props: TooltipProviderProps): JSX.Element;
 interface TooltipTriggerProps extends Tooltip$1.Trigger.Props {}
 declare function TooltipTrigger(props: TooltipTriggerProps): JSX.Element;
 //#endregion
-export { BUTTON_CLASS_NAME, Button, ButtonIconProps, ButtonLink, ButtonLinkProps, ButtonProps, COLUMN_CLASS_NAME, Column, ColumnProps, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, INPUT_CLASS_NAME, Input, InputProps, LABEL_CLASS_NAME, Label, LabelProps, ROW_CLASS_NAME, Row, RowProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, SpacerProps, Switch, 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, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps };
+export { BUTTON_CLASS_NAME, Button, ButtonIconProps, ButtonLink, ButtonLinkProps, ButtonProps, COLUMN_CLASS_NAME, Column, ColumnProps, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, INPUT_CLASS_NAME, Input, InputProps, LABEL_CLASS_NAME, Label, LabelProps, PASSCODE_CLASS_NAME, PASSCODE_INPUT_CLASS_NAME, Passcode, PasscodeInput, ROW_CLASS_NAME, Row, RowProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, SpacerProps, Switch, 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, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps };

package/dist/components/index.js

@@ -1,7 +1,7 @@
 import './style.css';
 import { createElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Drawer, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
+import { Drawer, OTPFieldPreview, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "@base-ui/react";
 //#region src/utils/normalize-whitespace.ts
 /**
 * Collapses consecutive whitespace characters into single spaces and trims
@@ -316,6 +316,42 @@ function Label(props) {
 }
 const LABEL_CLASS_NAME = { BASE: label_module_default.label };
 //#endregion
+//#region src/components/passcode/passcode.module.css
+var passcode_module_default = { "passcode": "passcode-module_passcode_7_gTQW" };
+//#endregion
+//#region src/components/passcode/passcode.tsx
+function Passcode(props) {
+	const { className: customClassName = "", isDisabled = false, ...rest } = props;
+	const combinedClassName = normalizeWhitespace(`
+    ${PASSCODE_CLASS_NAME.BASE}
+    ${customClassName}
+  `);
+	return /* @__PURE__ */ jsx(OTPFieldPreview.Root, {
+		className: combinedClassName,
+		disabled: isDisabled,
+		...rest
+	});
+}
+const PASSCODE_CLASS_NAME = { BASE: passcode_module_default.passcode };
+//#endregion
+//#region src/components/passcode/passcode-input.module.css
+var passcode_input_module_default = { "passcode_input": "passcode-input-module_passcode_input_CHGhjq" };
+//#endregion
+//#region src/components/passcode/passcode-input.tsx
+function PasscodeInput(props) {
+	const { className: customClassName = "", isDisabled = false, ...rest } = props;
+	const combinedClassName = normalizeWhitespace(`
+    ${PASSCODE_INPUT_CLASS_NAME.BASE}
+    ${customClassName}
+  `);
+	return /* @__PURE__ */ jsx(OTPFieldPreview.Input, {
+		className: combinedClassName,
+		disabled: isDisabled,
+		...rest
+	});
+}
+const PASSCODE_INPUT_CLASS_NAME = { BASE: passcode_input_module_default.passcode_input };
+//#endregion
 //#region src/components/row/row.module.css
 var row_module_default = { "row": "row-module_row_sYCFIW" };
 //#endregion
@@ -703,4 +739,4 @@ function TooltipTrigger(props) {
 	});
 }
 //#endregion
-export { BUTTON_CLASS_NAME, Button, ButtonLink, COLUMN_CLASS_NAME, Column, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, INPUT_CLASS_NAME, Input, LABEL_CLASS_NAME, Label, ROW_CLASS_NAME, Row, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, Switch, 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, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { BUTTON_CLASS_NAME, Button, ButtonLink, COLUMN_CLASS_NAME, Column, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, INPUT_CLASS_NAME, Input, LABEL_CLASS_NAME, Label, PASSCODE_CLASS_NAME, PASSCODE_INPUT_CLASS_NAME, Passcode, PasscodeInput, ROW_CLASS_NAME, Row, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, Switch, 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, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/style.css

@@ -434,6 +434,44 @@
   width: fit-content;
   font-size: 14px;
 }
+.passcode-module_passcode_7_gTQW {
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  width: fit-content;
+  display: flex;
+}
+.passcode-input-module_passcode_input_CHGhjq {
+  background-color: var(--color-bg-primary);
+  box-shadow: 0 0 0 1px var(--color-border) inset;
+  color: var(--color-text-primary);
+  font-family: var(--font-body);
+  outline-color: var(--color-outline);
+  outline-offset: -2px;
+  text-align: center;
+  border-radius: 14px;
+  outline-width: 0;
+  outline-style: solid;
+  width: 40px;
+  height: 48px;
+  font-size: 16px;
+  font-weight: 500;
+  transition-property: box-shadow;
+  transition-duration: .15s;
+}
+
+.passcode-input-module_passcode_input_CHGhjq:enabled:hover {
+  --color-border: var(--color-gray-6);
+}
+
+.passcode-input-module_passcode_input_CHGhjq:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.passcode-input-module_passcode_input_CHGhjq:focus-visible {
+  outline-width: 2px;
+}
 .row-module_row_sYCFIW {
   flex-direction: row;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nattstack/ui",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
   "keywords": [
     "base-ui",
@@ -41,17 +41,17 @@
     "build": "tsdown",
     "check:type": "tsc",
     "dev": "tsdown --watch",
-    "prepublishOnly": "bun run build",
+    "prepublishOnly": "bun install && bun run check:type && bun run build",
     "release": "bun publish"
   },
   "dependencies": {
     "@base-ui/react": "1.4.0"
   },
   "devDependencies": {
-    "@tsdown/css": "0.21.8",
+    "@tsdown/css": "0.21.9",
     "@types/bun": "1.3.12",
-    "tsdown": "0.21.8",
-    "typescript": "6.0.2"
+    "tsdown": "0.21.9",
+    "typescript": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",