@povio/ui 0.0.2 → 0.0.3

package/src/components/inputs/shared/input.cva.ts

@@ -0,0 +1,182 @@
+import { type VariantProps, cva, cx } from "class-variance-authority";
+import type { ClassProp } from "class-variance-authority/types";
+
+import { uiOutlineClass } from "#ui/components/outline.clsx";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+export const inputBase = cva([uiOutlineClass, "flex w-full"], {
+  variants: {
+    variant: {
+      outlined: "",
+      filled: "",
+    },
+    as: {
+      default: "rounded-input-rounding-default",
+      floating: "rounded-input-rounding-default",
+      filter: "rounded-input-rounding-default",
+      inline: [
+        "rounded-input-rounding-default",
+        "border border-transparent bg-transparent text-text-default-1",
+        "hover:border-input-outlined-outline-hover",
+        "focus:border-input-outlined-outline-active",
+        "invalid:border-input-outlined-outline-error",
+        "disabled:hover:border-transparent",
+      ],
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "outlined",
+      as: "default",
+      className: [
+        "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+        "hover:border hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+        "focus-within:border focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+        "invalid:border invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+        "disabled:border disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus",
+      ],
+    },
+    {
+      variant: "filled",
+      as: "default",
+      className: [
+        "bg-input-filled-idle text-text-default-1",
+        "hover:border hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+        "focus-within:border focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
+        "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+        "disabled:bg-input-filled-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus",
+      ],
+    },
+    {
+      variant: "outlined",
+      as: "floating",
+      className: [
+        "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+        "hover:border hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+        "focus-within:border focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+        "invalid:border invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+        "disabled:border disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus",
+      ],
+    },
+    {
+      variant: "filled",
+      as: "floating",
+      className: [
+        "bg-input-filled-idle text-text-default-1",
+        "hover:border hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+        "focus-within:border focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-idle focus-within:text-text-default-1",
+        "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+        "disabled:bg-input-filled-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus",
+      ],
+    },
+    {
+      variant: "outlined",
+      as: "filter",
+      className: [
+        "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+        "hover:border hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+        "focus-within:border focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+        "invalid:border invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+        "disabled:border disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus",
+      ],
+    },
+    {
+      variant: "outlined",
+      as: "filter",
+      className: [
+        "bg-input-filled-idle text-text-default-1",
+        "hover:border hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+        "focus-within:border focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
+        "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+        "disabled:bg-input-filled-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus",
+      ],
+    },
+  ],
+  defaultVariants: {
+    variant: "outlined",
+    as: "default",
+  },
+});
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface InputBaseProps extends VariantProps<typeof inputBase> {}
+
+export const inputSize = cva("", {
+  variants: {
+    size: {
+      "extra-small": "px-input-side-xs py-input-height-extra-small text-label-1",
+      small: "px-input-side-s py-input-height-small text-label-1",
+      default: "px-input-side-m py-input-height-default text-label-1",
+      large: "px-input-side-l py-input-height-large text-label-1",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface InputSizeProps extends VariantProps<typeof inputSize> {}
+
+export const inputSide = cva("", {
+  variants: {
+    size: {
+      "extra-small": "",
+      small: "",
+      default: "",
+      large: "",
+    },
+    type: {
+      left: "",
+      right: "",
+      var: "",
+    },
+  },
+  compoundVariants: [
+    { type: "left", size: "extra-small", className: "left-input-side-xs" },
+    { type: "right", size: "extra-small", className: "right-input-side-xs" },
+    { type: "var", size: "extra-small", className: "--spacing-input-side-xs" },
+    { type: "left", size: "small", className: "left-input-side-s" },
+    { type: "right", size: "small", className: "right-input-side-s" },
+    { type: "var", size: "small", className: "--spacing-input-side-s" },
+    { type: "left", size: "default", className: "left-input-side-m" },
+    { type: "right", size: "default", className: "right-input-side-m" },
+    { type: "var", size: "default", className: "--spacing-input-side-m" },
+    { type: "left", size: "large", className: "left-input-side-l" },
+    { type: "right", size: "large", className: "right-input-side-l" },
+    { type: "var", size: "large", className: "--spacing-input-side-l" },
+  ],
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface InputSideProps extends VariantProps<typeof inputSide> {}
+
+export interface InputVariantProps extends InputBaseProps, InputSizeProps {}
+
+export const useInputCva = () => {
+  const uiStyle = UIStyle.useConfig();
+  const inputBaseCva = (uiStyle?.input?.baseCva ?? inputBase) as unknown as UIStyle.Cva<InputBaseProps>;
+  const inputSizeCva = (uiStyle?.input?.sizeCva ?? inputSize) as unknown as UIStyle.Cva<InputSizeProps>;
+
+  return ({ className, ...rest }: InputVariantProps & ClassProp) => {
+    return cx(inputBaseCva(rest), inputSizeCva(rest), className);
+  };
+};

package/src/components/inputs/shared/label.cva.ts

@@ -0,0 +1,146 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
+import { compoundMapper } from "#ui/utils/compoundMapper";
+
+export const labelBase = cva([], {
+  variants: {
+    as: {
+      default: ["flex items-start gap-1"],
+      filter: ["-translate-y-1/2 absolute top-1/2 left-input-side-default"],
+      inline: ["flex items-start gap-1"],
+      floating: [
+        "absolute left-input-side-default transition-all duration-75",
+        "-translate-y-1/2 top-1/2",
+
+        "text-text-default-2 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
+        "group-disabled/date-picker-content:text-interactive-text-secondary-disabled",
+        "group-disabled/text-editor:text-interactive-text-secondary-disabled",
+        "group-has-[input:disabled]/select-content:text-interactive-text-secondary-disabled",
+        "group-has-[textarea:disabled]/text-area:text-interactive-text-secondary-disabled",
+
+        // TextArea default positioning
+        "group-data-[text-area]/text-area:top-5 group-data-[text-area]/text-area:translate-y-0",
+        // TextEditor default positioning
+        "group-data-[text-editor]/text-editor:top-5 group-data-[text-editor]/text-editor:left-2 group-data-[text-editor]/text-editor:translate-y-0",
+        // Text and Number Input
+        "group-focus/input-content:top-1 group-focus/input-content:translate-y-0",
+        "group-focus-within/input-content:top-1 group-focus-within/input-content:translate-y-0",
+        "group-has-[input:not(:placeholder-shown)]/input-content:top-1 group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
+
+        // TextArea
+        "group-focus/text-area:top-1 group-focus/text-area:translate-y-0",
+        "group-focus-within/text-area:top-1 group-focus-within/text-area:translate-y-0",
+        "group-has-[textarea:not(:placeholder-shown)]/text-area:top-1 group-has-[textarea:not(:placeholder-shown)]/text-area:translate-y-0",
+
+        // TextEditor
+        "group-focus/text-editor:top-1 group-focus/text-editor:translate-y-0",
+        "group-focus-within/text-editor:top-1 group-focus-within/text-editor:translate-y-0",
+        "group-data-[is-filled=true]/text-editor:top-1 group-data-[is-filled=true]/text-editor:translate-y-0",
+
+        // Date and Time Picker
+        "group-data-[has-selection]/date-picker-content:top-1 group-data-[has-selection]/date-picker-content:translate-y-0",
+        "group-focus-within/date-picker-content:top-1 group-focus-within/date-picker-content:translate-y-0",
+
+        // Select and Autocomplete
+        "group-data-[has-selection]/select-content:top-1 group-data-[has-selection]/select-content:translate-y-0",
+        "group-data-[searchable-focus-within]/select-content:top-1 group-data-[searchable-focus-within]/select-content:translate-y-0",
+        "group-data-[has-search]/select-content:top-1 group-data-[has-search]/select-content:translate-y-0",
+
+        // Text and Number Input
+        "group-has-[input:placeholder-shown]/input-content:text-text-default-3",
+        "group-has-[input:placeholder-shown]/input-content:!font-medium",
+        "group-has-[input:not(placeholder-shown)]/input-content:!font-semibold",
+        "group-has-[input:not(:placeholder-shown)]/input-content:!text-label-3",
+        "group-has-[input:not(placeholder-shown)]/input-content:text-text-default-1",
+        "group-focus-within/input-content:!text-text-default-1",
+        "group-focus-within/input-content:text-label-3",
+        "group-has-[input:focus-within]/input-content:!font-semibold",
+
+        // TextArea
+        "group-has-[textarea:placeholder-shown]/text-area:text-text-default-3",
+        "group-has-[textarea:placeholder-shown]/text-area:!font-medium",
+        "group-has-[textarea:not(placeholder-shown)]/text-area:!font-semibold",
+        "group-has-[textarea:not(:placeholder-shown)]/text-area:!text-label-3",
+        "group-has-[textarea:not(placeholder-shown)]/text-area:text-text-default-1",
+        "group-focus-within/text-area:!text-text-default-1",
+        "group-focus-within/text-area:text-label-3",
+        "group-has-[textarea:focus-within]/text-area:!font-semibold",
+
+        // TextEditor
+        "group-has-[data-text-editor:placeholder-shown]/text-editor:text-text-default-3",
+        "group-has-[data-text-editor:placeholder-shown]/text-editor:!font-medium",
+        "group-data-[is-filled=true]/text-editor:!font-semibold",
+        "group-data-[is-filled=true]/text-editor:!text-label-3",
+        "group-data-[is-filled=true]/text-editor:text-text-default-1",
+        "group-focus-within/text-editor:!text-text-default-1",
+        "group-focus-within/text-editor:text-label-3",
+        "group-has-[data-text-editor:focus-within]/text-editor:!font-semibold",
+
+        // DatePicker, TimePicker focus-within
+        "group-data-[has-selection]/date-picker-content:!font-semibold",
+        "group-data-[has-selection]/date-picker-content:!text-label-3",
+        "group-data-[has-selection]/date-picker-content:text-text-default-1",
+        "group-focus-within/date-picker-content:!font-semibold",
+        "group-focus-within/date-picker-content:!text-label-3",
+        "group-focus-within/date-picker-content:text-text-default-1",
+
+        // Select focused state
+        "group-data-[has-selection]/select-content:!font-semibold",
+        "group-data-[has-selection]/select-content:!text-label-3",
+        "group-data-[has-selection]/select-content:text-text-default-1",
+        "group-data-[searchable-focus-within]/select-content:!font-semibold",
+        "group-data-[searchable-focus-within]/select-content:!text-label-3",
+        "group-data-[searchable-focus-within]/select-content:text-text-default-1",
+        "group-data-[has-search]/select-content:!font-semibold",
+        "group-data-[has-search]/select-content:!text-label-3",
+        "group-data-[has-search]/select-content:text-text-default-1",
+      ],
+    },
+  },
+  defaultVariants: {
+    as: "default",
+  },
+});
+
+export interface LabelBaseProps extends VariantProps<typeof labelBase> {}
+
+export const labelTypography = compoundMapper<TypographyVariantProps, LabelBaseProps>({
+  compoundVariants: [
+    {
+      as: "default",
+      value: {
+        size: "label-2",
+        variant: "prominent-1",
+      },
+    },
+    {
+      as: "filter",
+      value: {
+        size: "label-1",
+        variant: "default",
+      },
+    },
+    {
+      as: "inline",
+      value: {
+        size: "label-2",
+        variant: "prominent-1",
+      },
+    },
+    {
+      as: "floating",
+      value: {
+        size: "label-1",
+        variant: "default",
+      },
+    },
+  ],
+  default: {
+    size: "label-2",
+    variant: "prominent-1",
+  },
+  defaultVariants: {
+    as: "default",
+  },
+});

package/src/components/outline.clsx.ts

@@ -0,0 +1,9 @@
+import { clsx } from "clsx";
+
+export const uiOutlineClass = clsx(
+  "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2",
+);
+
+export const uiGroupOutlineClass = clsx(
+  "group-focus:outline-none group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-solid group-focus-visible:outline-offset-2",
+);

package/src/components/overlays/ActionModal/ActionModal.tsx

@@ -0,0 +1,93 @@
+import { clsx } from "clsx";
+
+import { Button } from "#ui/components/buttons/Button/Button";
+import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
+import { Modal, type ModalProps } from "#ui/components/overlays/Modal/Modal";
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+const textAlignClassMap: Record<NonNullable<ActionModalProps["textAlign"]>, string> = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+};
+
+interface ActionModalAction {
+  label: string;
+  onPress: () => void;
+  className?: string;
+  variant?: ButtonVariantProps["variant"];
+  color?: ButtonVariantProps["color"];
+}
+
+export interface ActionModalProps extends ModalProps {
+  heading: string;
+  description: string;
+  primaryAction: ActionModalAction;
+  secondaryAction?: ActionModalAction;
+  buttonSize?: ButtonVariantProps["size"];
+  textAlign?: "left" | "center" | "right";
+}
+
+export const ActionModal = ({
+  heading,
+  description,
+  primaryAction,
+  secondaryAction,
+  buttonSize = "m",
+  textAlign = "left",
+  modalClassName,
+  ...modalProps
+}: ActionModalProps) => {
+  const textAlignClass = textAlignClassMap[textAlign];
+
+  return (
+    <Modal
+      modalClassName={clsx("w-modal", modalClassName)}
+      {...modalProps}
+    >
+      <div className="flex flex-col gap-modal-gap-text">
+        <Typography
+          size="title-5"
+          variant="prominent-1"
+          as="h2"
+          className={textAlignClass}
+        >
+          {heading}
+        </Typography>
+
+        <Typography
+          size="body-3"
+          className={textAlignClass}
+        >
+          {description}
+        </Typography>
+      </div>
+
+      <div className="flex w-full flex-wrap gap-modal-gap-buttons pt-1">
+        {secondaryAction && (
+          <Button
+            variant={secondaryAction?.variant ?? "contained"}
+            size={buttonSize}
+            color={secondaryAction?.color ?? "secondary"}
+            width="fill"
+            onPress={secondaryAction?.onPress}
+            className={clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className)}
+          >
+            {secondaryAction?.label}
+          </Button>
+        )}
+
+        <Button
+          variant={primaryAction?.variant ?? "contained"}
+          size={buttonSize}
+          color={primaryAction?.color ?? "primary"}
+          width="fill"
+          onPress={primaryAction.onPress}
+          className={clsx("min-w-40 flex-1 shrink-0", primaryAction?.className)}
+        >
+          {primaryAction.label}
+        </Button>
+      </div>
+    </Modal>
+  );
+};