southpaw 0.2.7

package/ui/numberformatter.tsx

@@ -0,0 +1,15 @@
+import { NumberFormatter, NumberFormatterProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = NumberFormatterProps;
+const Component = create_component({
+  name: "NumberFormatter",
+  description: "The numberformatter UI element",
+  props: {} as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <NumberFormatter {...other}>{children}</NumberFormatter>;
+  },
+});
+export default Component;

package/ui/numberinput.tsx

@@ -0,0 +1,37 @@
+import { NumberInput, NumberInputProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = NumberInputProps;
+const Component = create_component({
+  name: "NumberInput",
+  description: "The numberinput UI element",
+  props: {
+    placeholder: "Placeholder...",
+  } as Props,
+  propsDef: {
+    placeholder: { type: "text", label: "Placeholder" },
+    label: { type: "text", label: "Label" },
+    description: { type: "text", label: "Description" },
+    error: { type: "text", label: "Error" },
+    disabled: { type: "switch", label: "Disabled" },
+    size: { type: "size", label: "Size" },
+    radius: { type: "size", label: "Radius" },
+    variant: {
+      type: "select",
+      options: ["default", "filled", "unstyled"],
+      label: "Variant",
+    },
+    min: { type: "number", label: "Min" },
+    max: { type: "number", label: "Max" },
+    step: { type: "number", label: "Step" },
+    hideControls: { type: "switch", label: "Hide Controls" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <NumberInput {...other} />;
+  },
+});
+export default Component;

package/ui/overlay.tsx

@@ -0,0 +1,15 @@
+import { Overlay, OverlayProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = OverlayProps;
+const Component = create_component({
+  name: "Overlay",
+  description: "The overlay UI element",
+  props: {} as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Overlay {...other}>{children}</Overlay>;
+  },
+});
+export default Component;

package/ui/pagination.tsx

@@ -0,0 +1,21 @@
+import { Pagination, PaginationProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = Partial<PaginationProps>;
+const Component = create_component({
+  name: "Pagination",
+  description: "The pagination UI element",
+  props: {
+    total: 5,
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, total, ...other } = this.props;
+    return (
+      <Pagination total={total!} {...other}>
+        {children}
+      </Pagination>
+    );
+  },
+});
+export default Component;

package/ui/paper.tsx

@@ -0,0 +1,33 @@
+import { Paper, PaperProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+import { PropsWithChildren } from "react";
+
+type Props = PropsWithChildren<PaperProps>;
+const Component = create_component({
+  name: "Paper",
+  description: "The paper UI element",
+  props: {} as Props,
+  propsDef: {
+    shadow: {
+      type: "select",
+      options: ["xs", "sm", "md", "lg", "xl"],
+      label: "Shadow",
+    },
+    radius: {
+      type: "size",
+      label: "Radius",
+    },
+    withBorder: {
+      type: "switch",
+      label: "With Border",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Paper {...other}>{children}</Paper>;
+  },
+});
+export default Component;

package/ui/passwordinput.tsx

@@ -0,0 +1,36 @@
+import { PasswordInput, PasswordInputProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = PasswordInputProps;
+const Component = create_component({
+  name: "PasswordInput",
+  description: "The passwordinput UI element",
+  props: {
+    placeholder: "Placeholder...",
+  } as Props,
+  propsDef: {
+    placeholder: { type: "text", label: "Placeholder" },
+    label: { type: "text", label: "Label" },
+    description: { type: "text", label: "Description" },
+    error: { type: "text", label: "Error" },
+    disabled: { type: "switch", label: "Disabled" },
+    size: { type: "size", label: "Size" },
+    radius: { type: "size", label: "Radius" },
+    variant: {
+      type: "select",
+      options: ["default", "filled", "unstyled"],
+      label: "Variant",
+    },
+    visible: { type: "switch", label: "Visible" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return (
+      <PasswordInput miw={150} {...other} />
+    );
+  },
+});
+export default Component;

package/ui/pill.tsx

@@ -0,0 +1,17 @@
+import { Pill, PillProps, Text } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = PillProps;
+const Component = create_component({
+  name: "Pill",
+  description: "The pill UI element",
+  props: {
+    children: <Text>Pill</Text>,
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Pill {...other}>{children}</Pill>;
+  },
+});
+export default Component;

package/ui/pillsinput.tsx

@@ -0,0 +1,37 @@
+import {
+  Pill,
+  PillsInput,
+  PillsInputFieldProps,
+  PillsInputProps,
+} from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = Omit<PillsInputProps, "children" | "placeholder"> & {
+  value: string[];
+  inputProps: PillsInputFieldProps;
+};
+const Component = create_component({
+  name: "PillsInput",
+  description: "The pillsinput UI element",
+  props: {
+    value: [],
+    inputProps: {
+      placeholder: "Add a pill",
+    },
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { inputProps, value, ...other } = this.props;
+    return (
+      <PillsInput maw="100%" {...other}>
+        <Pill.Group>
+          {value.map((v, i) => {
+            return <Pill key={i}>{v}</Pill>;
+          })}
+          <PillsInput.Field {...inputProps} />
+        </Pill.Group>
+      </PillsInput>
+    );
+  },
+});
+export default Component;

package/ui/pininput.tsx

@@ -0,0 +1,30 @@
+import { PinInput, PinInputProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = PinInputProps;
+const Component = create_component({
+  name: "PinInput",
+  description: "The pininput UI element",
+  props: {} as Props,
+  propsDef: {
+    size: { type: "size", label: "Size" },
+    radius: { type: "size", label: "Radius" },
+    length: { type: "number", label: "Length" },
+    disabled: { type: "switch", label: "Disabled" },
+    error: { type: "switch", label: "Error" },
+    type: {
+      type: "select",
+      options: ["alphanumeric", "number", "regexp"],
+      label: "Type",
+    },
+    mask: { type: "switch", label: "Mask" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <PinInput {...other} />;
+  },
+});
+export default Component;

package/ui/popover.tsx

@@ -0,0 +1,43 @@
+import { Button, ButtonProps, Popover, PopoverProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = PopoverProps & {
+  label: string;
+  buttonProps: ButtonProps;
+};
+const Component = create_component({
+  name: "Popover",
+  description: "The popover UI element",
+  props: {
+    label: "",
+    buttonProps: {
+      color: "primary",
+    },
+  } as Props,
+  propsDef: {
+    opened: { type: "switch", label: "Opened" },
+    width: { type: "number", label: "Width" },
+    position: {
+      type: "select",
+      options: ["bottom", "top", "left", "right"],
+      label: "Position",
+    },
+    withArrow: { type: "switch", label: "With Arrow" },
+    shadow: { type: "size", label: "Shadow" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, label, buttonProps, ...other } = this.props;
+    return (
+      <Popover {...other}>
+        <Popover.Target>
+          <Button {...buttonProps}>{label}</Button>
+        </Popover.Target>
+        <Popover.Dropdown>{children}</Popover.Dropdown>
+      </Popover>
+    );
+  },
+});
+export default Component;

package/ui/portal.tsx

@@ -0,0 +1,15 @@
+import { Portal, PortalProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = PortalProps;
+const Component = create_component({
+  name: "Portal",
+  description: "The portal UI element",
+  props: {} as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Portal {...other}>{children}</Portal>;
+  },
+});
+export default Component;

package/ui/progress.tsx

@@ -0,0 +1,49 @@
+import {
+  Progress,
+  ProgressProps,
+  ProgressRootProps,
+  ProgressSectionProps,
+} from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef, colorPropsDef } from "./propsDef";
+
+type Props = ProgressProps &
+  ProgressRootProps & {
+    sections?: ({ label: string } & ProgressSectionProps)[];
+  };
+const Component = create_component({
+  name: "Progress",
+  description: "The progress UI element",
+  props: {
+    value: 0,
+    sections: [],
+  } as Props,
+  propsDef: {
+    value: { type: "number", label: "Value" },
+    striped: { type: "switch", label: "Striped" },
+    animated: { type: "switch", label: "Animated" },
+    size: { type: "size", label: "Size" },
+    radius: { type: "size", label: "Radius" },
+    ...spacingPropsDef,
+    ...colorPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, sections, ...other } = this.props;
+    if (Array.isArray(sections) && sections.length) {
+      return (
+        <Progress.Root {...(other as ProgressRootProps)}>
+          {sections.map((section, i) => {
+            return (
+              <Progress.Section key={i} {...section}>
+                <Progress.Label>{section.label}</Progress.Label>
+              </Progress.Section>
+            );
+          })}
+        </Progress.Root>
+      );
+    }
+    return <Progress {...(other as ProgressProps)} />;
+  },
+});
+export default Component;

package/ui/props.ts

@@ -0,0 +1,91 @@
+type ExtendedProps<Props = {}, OverrideProps = {}> = OverrideProps &
+  Omit<Props, keyof OverrideProps>;
+type ElementType =
+  | keyof JSX.IntrinsicElements
+  | React.JSXElementConstructor<any>;
+type PropsOf<C extends ElementType> = JSX.LibraryManagedAttributes<
+  C,
+  React.ComponentPropsWithoutRef<C>
+>;
+type ComponentProp<C> = {
+  component?: C;
+};
+type InheritedProps<C extends ElementType, Props = {}> = ExtendedProps<
+  PropsOf<C>,
+  Props
+>;
+export type PolymorphicRef<C> = C extends React.ElementType
+  ? React.ComponentPropsWithRef<C>["ref"]
+  : never;
+export type PolymorphicComponentProps<
+  C,
+  Props = {},
+> = C extends React.ElementType
+  ? InheritedProps<C, Props & ComponentProp<C>> & {
+      ref?: PolymorphicRef<C>;
+      renderRoot?: (props: any) => any;
+    }
+  : Props & {
+      component: React.ElementType;
+      renderRoot?: (props: Record<string, any>) => any;
+    };
+
+export const MOUNT_ANIMATIONS = {
+  fade: {
+    keyframes: {
+      opacity: [0, 1],
+    },
+    options: {
+      easing: "ease-out",
+      duration: 400,
+    },
+  },
+  fadeRight: {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translateX(-50%)", "translateX(0%)"],
+    },
+    options: {
+      easing: "ease-out",
+      duration: 400,
+    },
+  },
+  fadeLeft: {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translateX(50%)", "translateX(0%)"],
+    },
+    options: {
+      easing: "ease-out",
+      duration: 400,
+    },
+  },
+  fadeUp: {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translateY(-50%)", "translateY(0%)"],
+    },
+    options: {
+      easing: "ease-out",
+      duration: 400,
+    },
+  },
+  fadeDown: {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translateY(50%)", "translateY(0%)"],
+    },
+    options: {
+      easing: "ease-out",
+      duration: 400,
+    },
+  },
+} as const;
+export type CommonProps = {
+  mount_animation?:
+    | keyof typeof MOUNT_ANIMATIONS
+    | {
+        keyframes: Keyframe[];
+        options?: KeyframeAnimationOptions;
+      };
+};

package/ui/propsDef.ts

@@ -0,0 +1,38 @@
+import { PropsDef } from "../modules/component";
+
+export const colorPropsDef: PropsDef = {
+  bg: {
+    type: "color",
+    label: "Background",
+  },
+  c: {
+    type: "color",
+    label: "Color",
+  },
+};
+export const spacingPropsDef: PropsDef = {
+  w: {
+    type: "number",
+    label: "Width",
+  },
+  h: {
+    type: "number",
+    label: "Height",
+  },
+  py: {
+    type: "number",
+    label: "Vertical padding",
+  },
+  px: {
+    type: "number",
+    label: "Horizontal padding",
+  },
+  my: {
+    type: "number",
+    label: "Vertical margin",
+  },
+  mx: {
+    type: "number",
+    label: "Horizontal margin",
+  },
+};

package/ui/radio.tsx

@@ -0,0 +1,30 @@
+import { Radio, RadioProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = RadioProps;
+const Component = create_component({
+  name: "Radio",
+  description: "The radio UI element",
+  props: {} as Props,
+  propsDef: {
+    label: { type: "text", label: "Label" },
+    description: { type: "text", label: "Description" },
+    error: { type: "text", label: "Error" },
+    disabled: { type: "switch", label: "Disabled" },
+    size: { type: "size", label: "Size" },
+    color: { type: "color", label: "Color" },
+    labelPosition: {
+      type: "select",
+      options: ["left", "right"],
+      label: "Label Position",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { ...other } = this.props;
+    return <Radio {...other} />;
+  },
+});
+export default Component;

package/ui/rating.tsx

@@ -0,0 +1,25 @@
+import { Rating, RatingProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = RatingProps;
+const Component = create_component({
+  name: "Rating",
+  description: "The rating UI element",
+  props: {} as Props,
+  propsDef: {
+    size: { type: "size", label: "Size" },
+    color: { type: "color", label: "Color" },
+    count: { type: "number", label: "Count" },
+    fractions: { type: "number", label: "Fractions" },
+    readOnly: { type: "switch", label: "Read Only" },
+    highlightSelectedOnly: { type: "switch", label: "Highlight Selected Only" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Rating {...other}>{children}</Rating>;
+  },
+});
+export default Component;

package/ui/ringprogress.tsx

@@ -0,0 +1,17 @@
+import { RingProgress, RingProgressProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+
+type Props = RingProgressProps;
+const Component = create_component({
+  name: "RingProgress",
+  description: "The ringprogress UI element",
+  props: {
+    sections: [],
+  } as Props,
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <RingProgress {...other}>{children}</RingProgress>;
+  },
+});
+export default Component;

package/ui/scrollarea.tsx

@@ -0,0 +1,27 @@
+import { ScrollArea, ScrollAreaProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = ScrollAreaProps;
+const Component = create_component({
+  name: "ScrollArea",
+  description: "The scrollarea UI element",
+  props: {} as Props,
+  propsDef: {
+    offsetScrollbars: { type: "switch", label: "Offset Scrollbars" },
+    type: {
+      type: "select",
+      options: ["auto", "always", "scroll", "hover", "never"],
+      label: "Type",
+    },
+    scrollbarSize: { type: "number", label: "Scrollbar Size" },
+    scrollHideDelay: { type: "number", label: "Hide Delay" },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <ScrollArea {...other}>{children}</ScrollArea>;
+  },
+});
+export default Component;

package/ui/segmentedcontrol.tsx

@@ -0,0 +1,38 @@
+import { SegmentedControl, SegmentedControlProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = SegmentedControlProps;
+const Component = create_component({
+  name: "SegmentedControl",
+  description: "The segmentedcontrol UI element",
+  props: {
+    data: ["Item 1", "Item 2", "Item 3"],
+  } as Props,
+  propsDef: {
+    size: { type: "size", label: "Size" },
+    color: { type: "color", label: "Color" },
+    radius: { type: "size", label: "Radius" },
+    fullWidth: { type: "switch", label: "Full Width" },
+    orientation: {
+      type: "select",
+      options: ["horizontal", "vertical"],
+      label: "Orientation",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, fullWidth, ...other } = this.props;
+    return (
+      <SegmentedControl
+        {...other}
+        fullWidth={fullWidth}
+        w={fullWidth ? "100%" : undefined}
+      >
+        {children}
+      </SegmentedControl>
+    );
+  },
+});
+export default Component;

package/ui/select.tsx

@@ -0,0 +1,43 @@
+import { Select, SelectProps } from "@mantine/core";
+import { create_component } from "../modules/component";
+import { spacingPropsDef } from "./propsDef";
+
+type Props = SelectProps;
+const Component = create_component({
+  name: "Select",
+  description: "The select UI element",
+  props: {
+    placeholder: "Select an option",
+  } as Props,
+  propsDef: {
+    size: { type: "size", label: "Size" },
+    label: { type: "text", label: "Label" },
+    description: { type: "text", label: "Description" },
+    error: { type: "text", label: "Error" },
+    placeholder: { type: "text", label: "Placeholder" },
+    disabled: { type: "switch", label: "Disabled" },
+    radius: { type: "size", label: "Radius" },
+    searchable: { type: "switch", label: "Searchable" },
+    clearable: { type: "switch", label: "Clearable" },
+    checkIconPosition: {
+      type: "segmented",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" },
+      ],
+      label: "Check Icon Position",
+    },
+    variant: {
+      type: "select",
+      options: ["default", "filled", "unstyled"],
+      label: "Variant",
+    },
+    ...spacingPropsDef,
+  },
+  render() {
+    delete this.props["mount_animation"];
+    const { children, ...other } = this.props;
+    return <Select {...other}>{children}</Select>;
+  },
+});
+export default Component;