feat: add Hidden component

.changeset/hip-cherries-hang.md

@@ -0,0 +1,5 @@
+---
+"@badrap/libapp": patch
+---
+
+Add Hidden component

src/ui/experimental/Hidden.ts

@@ -0,0 +1,11 @@
+import { UiNode, element, Breakpoint } from "../internal.js";
+
+type HiddenProps = {
+  after?: Breakpoint;
+  before?: Breakpoint;
+  children?: UiNode;
+};
+
+export function Hidden(props: HiddenProps): UiNode {
+  return element("ui-hidden", props);
+}

src/ui/experimental/index.ts

@@ -8,6 +8,7 @@ export { Divider } from "./Divider.js";
 export { DownloadButton } from "./DownloadButton.js";
 export { Flex } from "./Flex.js";
 export { Form } from "./Form.js";
+export { Hidden } from "./Hidden.js";
 export { HiddenInput } from "./HiddenInput.js";
 export { MaterialIcon } from "./MaterialIcon.js";
 export { Link } from "./Link.js";

src/ui/internal.ts

@@ -62,6 +62,8 @@ export function element(
   return type(props);
 }
 
-export type Responsive<T> = T | { base?: T; sm?: T; md?: T; lg?: T };
+export type Breakpoint = "base" | "sm" | "md" | "lg";
+
+export type Responsive<T> = T | { [K in Breakpoint]?: T };
 
 export type Space = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";