@pixpilot/shadcn-ui 0.17.0 → 0.19.0

package/dist/Select.cjs

@@ -8,13 +8,38 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/Select.tsx
 function Select(props) {
-	const { options, value = "", onChange, placeholder, contentProps,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp,...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = react.default.useState(false);
+	const open = openProp ?? uncontrolledOpen;
+	const handleOpenChange = (nextOpen) => {
+		if (openProp === void 0) setUncontrolledOpen(nextOpen);
+		onOpenChangeProp?.(nextOpen);
+	};
+	const handleTriggerKeyDown = (event) => {
+		if (keyboardMode !== "cycle") return;
+		if (open) return;
+		if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (!options || options.length === 0) return;
+		const currentIndex = options.findIndex((option) => String(option.value) === value);
+		const optionCount = options.length;
+		let nextIndex = 0;
+		if (event.key === "ArrowDown") nextIndex = currentIndex >= 0 ? (currentIndex + 1) % optionCount : 0;
+		else nextIndex = currentIndex >= 0 ? (currentIndex - 1 + optionCount) % optionCount : optionCount - 1;
+		const nextValue = String(options[nextIndex]?.value ?? "");
+		if (!nextValue || nextValue === value) return;
+		onChange?.(nextValue);
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Select, {
 		value,
 		onValueChange: onChange,
+		open,
+		onOpenChange: handleOpenChange,
 		...restProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectTrigger, {
 			className: "w-full",
+			onKeyDown: handleTriggerKeyDown,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectValue, { placeholder })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.SelectContent, {
 			...contentProps,

package/dist/Select.d.cts

@@ -13,6 +13,7 @@ type BaseSelectProps = {
   value?: string;
   onChange?: (value: string) => void;
   placeholder?: string;
+  keyboardMode?: 'cycle' | 'dropdown';
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
 declare function Select$1(props: BaseSelectProps): react_jsx_runtime3.JSX.Element;
 //#endregion

package/dist/Select.d.ts

@@ -13,6 +13,7 @@ type BaseSelectProps = {
   value?: string;
   onChange?: (value: string) => void;
   placeholder?: string;
+  keyboardMode?: 'cycle' | 'dropdown';
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
 declare function Select$1(props: BaseSelectProps): react_jsx_runtime3.JSX.Element;
 //#endregion

package/dist/Select.js

@@ -4,13 +4,38 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/Select.tsx
 function Select$1(props) {
-	const { options, value = "", onChange, placeholder, contentProps,...restProps } = props;
+	const { options, value = "", onChange, placeholder, contentProps, keyboardMode = "dropdown", open: openProp, onOpenChange: onOpenChangeProp,...restProps } = props;
+	const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+	const open = openProp ?? uncontrolledOpen;
+	const handleOpenChange = (nextOpen) => {
+		if (openProp === void 0) setUncontrolledOpen(nextOpen);
+		onOpenChangeProp?.(nextOpen);
+	};
+	const handleTriggerKeyDown = (event) => {
+		if (keyboardMode !== "cycle") return;
+		if (open) return;
+		if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (!options || options.length === 0) return;
+		const currentIndex = options.findIndex((option) => String(option.value) === value);
+		const optionCount = options.length;
+		let nextIndex = 0;
+		if (event.key === "ArrowDown") nextIndex = currentIndex >= 0 ? (currentIndex + 1) % optionCount : 0;
+		else nextIndex = currentIndex >= 0 ? (currentIndex - 1 + optionCount) % optionCount : optionCount - 1;
+		const nextValue = String(options[nextIndex]?.value ?? "");
+		if (!nextValue || nextValue === value) return;
+		onChange?.(nextValue);
+	};
 	return /* @__PURE__ */ jsxs(Select, {
 		value,
 		onValueChange: onChange,
+		open,
+		onOpenChange: handleOpenChange,
 		...restProps,
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
 			className: "w-full",
+			onKeyDown: handleTriggerKeyDown,
 			children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
 		}), /* @__PURE__ */ jsx(SelectContent, {
 			...contentProps,

package/dist/file-upload-inline/FileUploadInline.d.cts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.cjs";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/file-upload-inline/FileUploadInline.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/file-upload-inline/FileUploadInline.d.ts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.js";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/file-upload-inline/FileUploadInline.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime7.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/input/Input.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import { InputProps } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
   prefixClassName?: string;
   suffixClassName?: string;
 };
-declare function Input(props: InputProps$1): react_jsx_runtime7.JSX.Element;
+declare function Input(props: InputProps$1): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { Input, InputProps$1 as InputProps };

package/dist/input/Input.d.ts

@@ -1,6 +1,6 @@
 import { InputProps } from "@pixpilot/shadcn";
 import * as React$1 from "react";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/input/Input.d.ts
 type InputProps$1 = InputProps & {
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
   prefixClassName?: string;
   suffixClassName?: string;
 };
-declare function Input$1(props: InputProps$1): react_jsx_runtime8.JSX.Element;
+declare function Input$1(props: InputProps$1): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { Input$1 as Input, InputProps$1 as InputProps };

package/dist/layout/Layout.cjs

@@ -7,8 +7,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/layout/Layout.tsx
-const Layout = react.default.forwardRef(({ className,...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const Layout = react.default.forwardRef(({ className, as: Component = "div",...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
 		className: (0, __pixpilot_shadcn.cn)("flex w-full flex-col overflow-hidden", "h-dvh", "max-h-full", className),
 		...props

package/dist/layout/Layout.d.cts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/Layout.d.ts
-interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Layout, LayoutProps };

package/dist/layout/Layout.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/Layout.d.ts
-interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Layout, LayoutProps };

package/dist/layout/Layout.js

@@ -3,8 +3,8 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/layout/Layout.tsx
-const Layout = React.forwardRef(({ className,...props }, ref) => {
-	return /* @__PURE__ */ jsx("div", {
+const Layout = React.forwardRef(({ className, as: Component = "div",...props }, ref) => {
+	return /* @__PURE__ */ jsx(Component, {
 		ref,
 		className: cn("flex w-full flex-col overflow-hidden", "h-dvh", "max-h-full", className),
 		...props

package/dist/layout/LayoutFooter.cjs

@@ -7,7 +7,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/layout/LayoutFooter.tsx
-const LayoutFooter = react.default.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const LayoutFooter = react.default.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 	...props,
 	className: (0, __pixpilot_shadcn.cn)(className),
 	ref

package/dist/layout/LayoutFooter.d.cts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/LayoutFooter.d.ts
-interface LayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const LayoutFooter: React.ForwardRefExoticComponent<LayoutFooterProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutFooter, LayoutFooterProps };

package/dist/layout/LayoutFooter.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/LayoutFooter.d.ts
-interface LayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const LayoutFooter: React.ForwardRefExoticComponent<LayoutFooterProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutFooter, LayoutFooterProps };

package/dist/layout/LayoutFooter.js

@@ -3,7 +3,7 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/layout/LayoutFooter.tsx
-const LayoutFooter = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const LayoutFooter = React.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ jsx(Component, {
 	...props,
 	className: cn(className),
 	ref

package/dist/layout/LayoutHeader.cjs

@@ -7,7 +7,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/layout/LayoutHeader.tsx
-const LayoutHeader = react.default.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const LayoutHeader = react.default.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 	...props,
 	className: (0, __pixpilot_shadcn.cn)(className),
 	ref

package/dist/layout/LayoutHeader.d.cts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/LayoutHeader.d.ts
-interface LayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const LayoutHeader: React.ForwardRefExoticComponent<LayoutHeaderProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutHeader, LayoutHeaderProps };

package/dist/layout/LayoutHeader.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 
 //#region src/layout/LayoutHeader.d.ts
-interface LayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface LayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
 declare const LayoutHeader: React.ForwardRefExoticComponent<LayoutHeaderProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutHeader, LayoutHeaderProps };

package/dist/layout/LayoutHeader.js

@@ -3,7 +3,7 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/layout/LayoutHeader.tsx
-const LayoutHeader = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+const LayoutHeader = React.forwardRef(({ className, as: Component = "div",...props }, ref) => /* @__PURE__ */ jsx(Component, {
 	...props,
 	className: cn(className),
 	ref

package/dist/layout/LayoutMain.cjs

@@ -7,8 +7,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/layout/LayoutMain.tsx
-const LayoutMain = react.default.forwardRef(({ autoScroll = true, className,...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
+const LayoutMain = react.default.forwardRef(({ autoScroll = true, className, as: Component = "div",...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		ref,
 		className: (0, __pixpilot_shadcn.cn)("flex-1", { "overflow-auto": autoScroll }, className),
 		...props

package/dist/layout/LayoutMain.d.cts

@@ -1,9 +1,10 @@
 import React from "react";
 
 //#region src/layout/LayoutMain.d.ts
-interface LayoutMainProps extends React.HTMLAttributes<HTMLElement> {
+interface LayoutMainProps extends React.HTMLAttributes<HTMLDivElement> {
   autoScroll?: boolean;
+  as?: React.ElementType;
 }
-declare const LayoutMain: React.ForwardRefExoticComponent<LayoutMainProps & React.RefAttributes<HTMLElement>>;
+declare const LayoutMain: React.ForwardRefExoticComponent<LayoutMainProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutMain, LayoutMainProps };

package/dist/layout/LayoutMain.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 
 //#region src/layout/LayoutMain.d.ts
-interface LayoutMainProps extends React.HTMLAttributes<HTMLElement> {
+interface LayoutMainProps extends React.HTMLAttributes<HTMLDivElement> {
   autoScroll?: boolean;
+  as?: React.ElementType;
 }
-declare const LayoutMain: React.ForwardRefExoticComponent<LayoutMainProps & React.RefAttributes<HTMLElement>>;
+declare const LayoutMain: React.ForwardRefExoticComponent<LayoutMainProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { LayoutMain, LayoutMainProps };

package/dist/layout/LayoutMain.js

@@ -3,8 +3,8 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/layout/LayoutMain.tsx
-const LayoutMain = React.forwardRef(({ autoScroll = true, className,...props }, ref) => {
-	return /* @__PURE__ */ jsx("main", {
+const LayoutMain = React.forwardRef(({ autoScroll = true, className, as: Component = "div",...props }, ref) => {
+	return /* @__PURE__ */ jsx(Component, {
 		ref,
 		className: cn("flex-1", { "overflow-auto": autoScroll }, className),
 		...props

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -58,9 +58,9 @@
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
     "@internal/eslint-config": "0.3.0",
-    "@internal/hooks": "0.0.0",
     "@internal/prettier-config": "0.0.1",
     "@internal/tsconfig": "0.1.0",
+    "@internal/hooks": "0.0.0",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },