vueless/ui.skeleton-input/config.ts

Vue Styleless UI Component Library, powered by Tailwind CSS.

export default /*tw*/ {
  wrapper: {
    base: "w-full gap-2",
    variants: {
      labelAlign: {
        top: "flex flex-col",
        left: "flex items-center",
        right: "flex flex-row-reverse items-center",
      },
    },
  },
  input: {
    base: "{USkeleton} p-2",
    compoundVariants: [
      { labelAlign: "topInside", size: "sm", type: "input", class: "h-11" },
      { labelAlign: "topInside", size: "md", type: "input", class: "h-12.5" },
      { labelAlign: "topInside", size: "lg", type: "input", class: "h-14.25" },
      { size: "sm", type: "input", label: false, class: "h-8" },
      { size: "md", type: "input", label: false, class: "h-8.5" },
      { size: "lg", type: "input", label: false, class: "h-9.25" },
      { labelAlign: "top", size: "sm", type: "input", class: "h-8" },
      { labelAlign: "top", size: "md", type: "input", class: "h-8.5" },
      { labelAlign: "top", size: "lg", type: "input", class: "h-9.25" },
      { labelAlign: "left", size: "sm", type: "input", class: "h-8" },
      { labelAlign: "left", size: "md", type: "input", class: "h-8.5" },
      { labelAlign: "left", size: "lg", type: "input", class: "h-9.25" },
      { labelAlign: "right", size: "sm", type: "input", class: "h-8" },
      { labelAlign: "right", size: "md", type: "input", class: "h-8.5" },
      { labelAlign: "right", size: "lg", type: "input", class: "h-9.25" },
      { labelAlign: "topInside", size: "sm", type: "textarea", class: "h-15.75" },
      { labelAlign: "topInside", size: "md", type: "textarea", class: "h-18" },
      { labelAlign: "topInside", size: "lg", type: "textarea", class: "h-20.5" },
      { size: "sm", type: "textarea", label: false, class: "h-13" },
      { size: "md", type: "textarea", label: false, class: "h-14.5" },
      { size: "lg", type: "textarea", label: false, class: "h-16" },
      { labelAlign: "top", size: "sm", type: "textarea", class: "h-13" },
      { labelAlign: "top", size: "md", type: "textarea", class: "h-14.5" },
      { labelAlign: "top", size: "lg", type: "textarea", class: "h-16" },
      { labelAlign: "left", size: "sm", type: "textarea", class: "h-13" },
      { labelAlign: "left", size: "md", type: "textarea", class: "h-14.5" },
      { labelAlign: "left", size: "lg", type: "textarea", class: "h-16" },
      { labelAlign: "right", size: "sm", type: "textarea", class: "h-13" },
      { labelAlign: "right", size: "md", type: "textarea", class: "h-14.5" },
      { labelAlign: "right", size: "lg", type: "textarea", class: "h-16" },
    ],
  },
  label: {
    base: "{USkeleton} w-1/5 rounded-small",
    compoundVariants: [
      { labelAlign: "top", size: "sm", class: "h-3" },
      { labelAlign: "top", size: "md", class: "h-3.5" },
      { labelAlign: "top", size: "lg", class: "h-4" },
      { labelAlign: "left", size: "sm", class: "h-3" },
      { labelAlign: "left", size: "md", class: "h-3.5" },
      { labelAlign: "left", size: "lg", class: "h-4" },
      { labelAlign: "right", size: "sm", class: "h-3" },
      { labelAlign: "right", size: "md", class: "h-3.5" },
      { labelAlign: "right", size: "lg", class: "h-4" },
    ],
  },
  defaults: {
    color: "neutral",
    variant: "default",
    labelAlign: "topInside",
    type: "input",
    size: "md",
    label: true,
  },
};