commit message

packages/shelter-ui/src/button.tsx

@@ -1,8 +1,9 @@
-import { type Component, type JSX, mergeProps, splitProps } from "solid-js";
+import { type JSX, mergeProps, splitProps } from "solid-js";
 import { classes, css } from "./button.tsx.scss";
 import { focusring } from "./focusring";
 import { tooltip } from "./tooltip";
 import { ensureInternalStyle } from "./internalstyles";
+import { type NativeExtendingComponent } from "./wrapperTypes";
 false && focusring;
 false && tooltip;
 
@@ -85,8 +86,7 @@ type ButtonProps = {
    */
   onDoubleClick?: (e: Event) => void;
 };
-
-export const Button: Component<ButtonProps & Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonProps>> = (
+export const Button: NativeExtendingComponent<ButtonProps, JSX.ButtonHTMLAttributes<HTMLButtonElement>> = (
   rawProps,
 ) => {
   const [local, buttonProps] = splitProps(
@@ -139,9 +139,10 @@ export const Button: Component<ButtonProps & Omit<JSX.ButtonHTMLAttributes<HTMLB
 
 type LinkButtonProps = {
   tooltip?: JSX.Element;
-} & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;
-
-export const LinkButton: Component<LinkButtonProps> = (rawProps) => {
+};
+export const LinkButton: NativeExtendingComponent<LinkButtonProps, JSX.AnchorHTMLAttributes<HTMLAnchorElement>> = (
+  rawProps,
+) => {
   const [local, anchorProps] = splitProps(
     mergeProps(
       {

packages/shelter-ui/src/checkbox.tsx

@@ -4,6 +4,7 @@ import { genId } from "./util";
 import { focusring } from "./focusring";
 import { tooltip } from "./tooltip";
 import { ensureInternalStyle } from "./internalstyles";
+import { type NativeExtendingComponent } from "./wrapperTypes";
 false && focusring;
 false && tooltip;
 
@@ -33,12 +34,9 @@ type CheckboxItemProps = {
   mt?: boolean;
   tooltip?: JSX.Element;
 };
-
-export const CheckboxItem: Component<
-  CheckboxItemProps &
-    // TODO: specifically only pick checkbox fields
-    Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof CheckboxItemProps>
-> = (rawProps) => {
+export const CheckboxItem: NativeExtendingComponent<CheckboxItemProps, JSX.InputHTMLAttributes<HTMLInputElement>> = (
+  rawProps,
+) => {
   const [local, checkboxProps] = splitProps(rawProps, ["onChange", "mt", "id", "tooltip", "children"]);
 
   ensureInternalStyle(css);
@@ -67,5 +65,6 @@ type CheckboxProps = {
   onChange?(newVal: boolean): void;
   tooltip?: JSX.Element;
 };
-export const Checkbox: Component<CheckboxProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof CheckboxProps>> =
-  (props) => <CheckboxItem {...props} />; // lazy lmao but it works
+export const Checkbox: NativeExtendingComponent<CheckboxProps, JSX.InputHTMLAttributes<HTMLInputElement>> = (props) => (
+  <CheckboxItem {...props} />
+);

packages/shelter-ui/src/focusring.tsx

@@ -1,4 +1,4 @@
-import { onCleanup, Component, Accessor } from "solid-js";
+import { onCleanup, type Component, type Accessor } from "solid-js";
 import { getRoot } from "./util";
 
 declare module "solid-js" {

packages/shelter-ui/src/header.tsx

@@ -1,7 +1,8 @@
-import { type Component, type JSX, splitProps } from "solid-js";
+import { type JSX, splitProps } from "solid-js";
 import { css, classes } from "./header.tsx.scss";
 import { Dynamic } from "solid-js/web";
 import { ensureInternalStyle } from "./internalstyles";
+import { type NativeExtendingComponent } from "./wrapperTypes";
 
 export const HeaderTags = {
   H1: classes.h1,
@@ -14,8 +15,7 @@ export const HeaderTags = {
 type HeaderProps = {
   tag: string;
 };
-
-export const Header: Component<HeaderProps & JSX.HTMLAttributes<HTMLHeadingElement>> = (props) => {
+export const Header: NativeExtendingComponent<HeaderProps, JSX.HTMLAttributes<HTMLHeadingElement>> = (props) => {
   ensureInternalStyle(css);
 
   const [local, headerProps] = splitProps(props, ["tag", "class"]);

packages/shelter-ui/src/icons.tsx

@@ -1,11 +1,12 @@
-import { Component, JSX } from "solid-js";
+import { type Component, type JSX } from "solid-js";
+import { type NativeExtendingComponent } from "./wrapperTypes";
 
 type IconProps = {
   // overwritten to exclude plain string
   style?: JSX.CSSProperties;
 };
 
-type IconComponent = Component<IconProps & Omit<JSX.SvgSVGAttributes<SVGSVGElement>, keyof IconProps>>;
+type IconComponent = NativeExtendingComponent<IconProps, JSX.SvgSVGAttributes<SVGSVGElement>>;
 
 export const IconClose: Component = (props: JSX.SvgSVGAttributes<SVGSVGElement>) => (
   <svg width="24" height="24" viewBox="0 0 24 24" {...props}>

packages/shelter-ui/src/index.tsx

@@ -1,4 +1,5 @@
-import { Component, JSX, splitProps } from "solid-js";
+import { type JSX, splitProps } from "solid-js";
+import { type NativeExtendingComponent } from "./wrapperTypes";
 
 export * from "./util";
 export * from "./button";
@@ -20,8 +21,7 @@ type TextProps = {
   // overwritten to exclude plain string
   style?: JSX.CSSProperties;
 };
-
-export const Text: Component<TextProps & Omit<JSX.HTMLAttributes<HTMLSpanElement>, keyof TextProps>> = (props) => (
+export const Text: NativeExtendingComponent<TextProps, JSX.HTMLAttributes<HTMLSpanElement>> = (props) => (
   <span
     {...props}
     style={{
@@ -37,10 +37,7 @@ type DividerProps = {
   // overwritten to exclude plain string
   style?: JSX.CSSProperties;
 };
-
-export const Divider: Component<DividerProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, keyof DividerProps>> = (
-  props,
-) => {
+export const Divider: NativeExtendingComponent<DividerProps, JSX.HTMLAttributes<HTMLDivElement>, "role"> = (props) => {
   const [local, divProps] = splitProps(props, ["mt", "mb", "style"]);
 
   return (
@@ -64,8 +61,7 @@ type SpaceProps = {
   // overwritten to exclude plain string
   style?: JSX.CSSProperties;
 };
-
-export const Space: Component<SpaceProps & Omit<JSX.HTMLAttributes<HTMLPreElement>, keyof SpaceProps>> = (props) => (
+export const Space: NativeExtendingComponent<SpaceProps, JSX.HTMLAttributes<HTMLPreElement>> = (props) => (
   <pre
     {...props}
     style={{

packages/shelter-ui/src/internalstyles.tsx

@@ -6,7 +6,9 @@ const styleSet = new Set<string>();
 const [styleTxt, setStyleTxt] = createSignal("");
 
 export const ensureInternalStyle = (style: string) => {
-  if (styleSet.has(style)) return;
+  if (styleSet.has(style)) {
+    return;
+  }
   styleSet.add(style);
   setStyleTxt((v) => v + style);
 };

packages/shelter-ui/src/modals.tsx

@@ -1,4 +1,4 @@
-import { Component, JSX, onCleanup } from "solid-js";
+import { type Component, type JSX, onCleanup } from "solid-js";
 import { classes } from "./modals.tsx.scss";
 import { Header, HeaderTags } from "./header";
 import { Button, ButtonColors, ButtonSizes } from "./button";

packages/shelter-ui/src/openModal.tsx

@@ -1,4 +1,4 @@
-import { Component, createEffect, createSignal, For } from "solid-js";
+import { type Component, createEffect, createSignal, For } from "solid-js";
 import { classes, css } from "./modals.tsx.scss";
 import { ReactiveRoot } from "./util";
 import { ensureInternalStyle } from "./internalstyles";

packages/shelter-ui/src/slider.tsx

@@ -1,42 +1,60 @@
-import { Component, JSX } from "solid-js";
+import { type JSX, mergeProps, splitProps } from "solid-js";
 import { classes, css } from "./slider.tsx.scss";
 import { ensureInternalStyle } from "./internalstyles";
+import { type NativeExtendingComponent } from "./wrapperTypes";
+
+type SliderProps = {
+  // solid JSX types kinda suck for input so I'm leaving these in
 
-export const Slider: Component<{
   min: number;
   max: number;
   tick?: boolean | number;
   step?: number | "any";
-  class?: string;
+  value?: number;
+
   style?: JSX.CSSProperties;
   onInput?(e: number): void;
-  value?: number;
-}> = (props) => {
+};
+export const Slider: NativeExtendingComponent<SliderProps, JSX.InputHTMLAttributes<HTMLInputElement>, "type"> = (
+  rawProps,
+) => {
   ensureInternalStyle(css);
 
+  const [local, other] = splitProps(
+    mergeProps(
+      {
+        step: "any",
+        value: rawProps.min,
+      },
+      rawProps,
+    ),
+    ["onInput", "style"],
+  );
+
   const ticks = () => {
-    if (!props.tick || typeof props.step !== "number") return [];
+    if (!other.tick || typeof other.step !== "number") {
+      return [];
+    }
 
-    const spacing = props.tick === true ? props.step : props.tick;
-    return Object.keys(Array(~~((props.max - props.min) / spacing) + 1).fill(0)).map((v) => parseInt(v) * spacing);
+    const spacing = other.tick === true ? other.step : other.tick;
+    return Object.keys(Array(Math.floor((other.max - other.min) / spacing) + 1).fill(0)).map(
+      (v) => parseInt(v) * spacing,
+    );
   };
 
   return (
     <div class={classes.scontainer}>
       <input
         type="range"
-        min={props.min}
-        max={props.max}
-        step={props.step ?? "any"}
+        {...other}
         class={classes.srange}
-        value={props.value ? props.value : props.min}
         style={
           {
-            ...props.style,
-            "--upper-half": `${((props.value - props.min) / (props.max - props.min)) * 100}%`,
-          } as JSX.CSSProperties
+            ...local.style,
+            "--upper-half": `${((other.value - other.min) / (other.max - other.min)) * 100}%`,
+          } satisfies JSX.CSSProperties
         }
-        onInput={(e) => props.onInput?.(parseFloat((e.target as HTMLInputElement).value))}
+        onInput={(e) => local.onInput?.(parseFloat((e.target as HTMLInputElement).value))}
       />
       <div class={classes.sticks}>
         {ticks().map((t) => (

packages/shelter-ui/src/switch_new.tsx

@@ -1,10 +1,11 @@
-import { Component, createEffect, JSX, on, onMount, Show } from "solid-js";
+import { type Component, createEffect, type JSX, on, Show, splitProps } from "solid-js";
 import { genId } from "./util";
 import { Divider } from "./index";
 import { css, classes } from "./switch_new.tsx.scss";
 import { focusring } from "./focusring";
 import { tooltip } from "./tooltip";
 import { ensureInternalStyle } from "./internalstyles";
+import { type NativeExtendingComponent } from "./wrapperTypes";
 false && focusring;
 false && tooltip;
 
@@ -113,75 +114,67 @@ const Slider: Component<{ state: boolean }> = (props) => {
   );
 };
 
-export const Switch: Component<{
-  id?: string;
-  checked?: boolean;
-  disabled?: boolean;
+type SwitchProps = {
   onChange?(newVal: boolean): void;
   tooltip?: JSX.Element;
-  "aria-label"?: string;
-}> = (props) => {
+};
+export const Switch: NativeExtendingComponent<SwitchProps, JSX.InputHTMLAttributes<HTMLInputElement>, "type"> = (
+  rawProps,
+) => {
   ensureInternalStyle(css);
 
+  const [local, other] = splitProps(rawProps, ["onChange", "tooltip"]);
+
   return (
     <div
-      class={`${classes.switch} ${props.disabled ? classes.disabled : ""}`}
+      class={`${classes.switch} ${other.disabled ? classes.disabled : ""}`}
       style={{
-        "--shltr-sw-col": props.checked ? COL_GREEN : COL_GRAY,
+        "--shltr-sw-col": other.checked ? COL_GREEN : COL_GRAY,
         "--shltr-sw-dur": DURATION + "ms",
       }}
     >
       {/* the slider */}
-      <Slider state={props.checked} />
+      <Slider state={other.checked} />
       {/* the actual input: useful for accessibility etc */}
       <input
         use:focusring={12}
-        use:tooltip={props.tooltip}
-        id={props.id}
-        type="checkbox"
-        checked={props.checked}
-        disabled={props.disabled}
-        aria-disabled={props.disabled}
-        aria-label={props["aria-label"]}
-        onchange={() => props.onChange?.(!props.checked)}
+        use:tooltip={local.tooltip}
+        onchange={() => local.onChange?.(!other.checked)}
+        {...other}
       />
     </div>
   );
 };
 
-export const SwitchItem: Component<{
-  value: boolean;
-  onChange?(v: boolean): void;
-  disabled?: boolean;
+type SwitchItemProps = SwitchProps & {
   children: JSX.Element;
   note?: JSX.Element;
   hideBorder?: boolean;
-  tooltip?: JSX.Element;
-  "aria-label"?: string;
-}> = (props) => {
+};
+export const SwitchItem: NativeExtendingComponent<
+  SwitchItemProps,
+  JSX.InputHTMLAttributes<HTMLInputElement>,
+  "type" | "id"
+> = (rawProps) => {
   const id = genId();
 
+  // TODO: allow external "id" prop?
+  const [local, other] = splitProps(rawProps, ["children", "note", "hideBorder"]);
+
   return (
     <div class={classes.sitem}>
       <div class={classes.irow}>
-        <label for={id}>{props.children}</label>
+        <label for={id}>{local.children}</label>
         <div>
-          <Switch
-            id={id}
-            checked={props.value}
-            onChange={props.onChange}
-            disabled={props.disabled}
-            aria-label={props["aria-label"]}
-            tooltip={props.tooltip}
-          />
+          <Switch id={id} {...other} />
         </div>
       </div>
 
-      <Show when={props.note} keyed>
-        <div class={classes.note}>{props.note}</div>
+      <Show when={local.note} keyed>
+        <div class={classes.note}>{local.note}</div>
       </Show>
 
-      <Show when={!props.hideBorder} keyed>
+      <Show when={!local.hideBorder} keyed>
         <Divider mt />
       </Show>
     </div>

packages/shelter-ui/src/switch_old.tsx

@@ -68,6 +68,9 @@ const ButtonIcon: Component<{ state: boolean }> = (props) => {
   );
 };
 
+/**
+ * @deprecated see switch_new
+ */
 export const Switch: Component<{
   id?: string;
   checked?: boolean;
@@ -106,6 +109,9 @@ export const Switch: Component<{
   );
 };
 
+/**
+ * @deprecated see switch_new
+ */
 export const SwitchItem: Component<{
   value: boolean;
   onChange?(v: boolean): void;