import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Calendar, Check, Heart, X } from "@truststack/icons-ui";
import { H1, H2, H3, H4, H5, H6, Paragraph, View, XStack } from "tamagui";
import { Alert } from "../Alert.native.js";
import { Button } from "../Button.native.js";
import { Card } from "../Card.native.js";
import { Chip } from "../Chip.native.js";
import { Divider } from "../Divider.native.js";
import { IconButton } from "../IconButton.native.js";
import { SearchBar } from "../Search.native.js";
import { Spinner } from "../Spinner.native.js";
var components_stories_default = {
  title: "Component Library/Component Overview",
  decorators: [function (Story) {
    return /* @__PURE__ */_jsx(View, {
      maw: 1200,
      m: "auto",
      children: /* @__PURE__ */_jsx(Story, {})
    });
  }]
};
var Overview = function () {
  return /* @__PURE__ */_jsxs(View, {
    dsp: "flex",
    gap: "$4",
    bg: "$background",
    p: "$2",
    children: [/* @__PURE__ */_jsxs(XStack, {
      gap: "$4",
      children: [/* @__PURE__ */_jsx(Card, {
        w: 300,
        children: /* @__PURE__ */_jsxs(Card.Header, {
          children: [/* @__PURE__ */_jsx(Card.Headline, {
            children: "Elevated"
          }), /* @__PURE__ */_jsx(Card.Subheader, {
            children: "Subheader"
          })]
        })
      }), /* @__PURE__ */_jsx(Card, {
        variant: "filled",
        w: 300,
        children: /* @__PURE__ */_jsxs(Card.Header, {
          children: [/* @__PURE__ */_jsx(Card.Headline, {
            children: "Filled"
          }), /* @__PURE__ */_jsx(Card.Subheader, {
            children: "Subheader"
          })]
        })
      }), /* @__PURE__ */_jsx(Card, {
        variant: "outlined",
        w: 300,
        children: /* @__PURE__ */_jsxs(Card.Header, {
          children: [/* @__PURE__ */_jsx(Card.Headline, {
            children: "Outlined"
          }), /* @__PURE__ */_jsx(Card.Subheader, {
            children: "Subheader"
          })]
        })
      })]
    }), /* @__PURE__ */_jsx(Divider, {}), /* @__PURE__ */_jsxs(XStack, {
      gap: "$4",
      children: [/* @__PURE__ */_jsx(Button, {
        children: /* @__PURE__ */_jsx(Button.Text, {
          children: "Button"
        })
      }), /* @__PURE__ */_jsx(Button, {
        variant: "outlined",
        children: /* @__PURE__ */_jsx(Button.Text, {
          children: "Button"
        })
      }), /* @__PURE__ */_jsx(Button, {
        variant: "tonal",
        children: /* @__PURE__ */_jsx(Button.Text, {
          children: "Button"
        })
      }), /* @__PURE__ */_jsxs(Button, {
        variant: "elevated",
        children: [/* @__PURE__ */_jsx(Button.Icon, {
          icon: Check
        }), /* @__PURE__ */_jsx(Button.Text, {
          children: "Button"
        })]
      }), /* @__PURE__ */_jsx(Button, {
        variant: "text",
        children: /* @__PURE__ */_jsx(Button.Text, {
          children: "Button"
        })
      })]
    }), /* @__PURE__ */_jsxs(XStack, {
      gap: "$4",
      children: [/* @__PURE__ */_jsx(IconButton, {
        variant: "filled",
        children: /* @__PURE__ */_jsx(IconButton.Icon, {
          icon: Heart
        })
      }), /* @__PURE__ */_jsx(IconButton, {
        variant: "filled-tonal",
        children: /* @__PURE__ */_jsx(IconButton.Icon, {
          icon: Heart
        })
      }), /* @__PURE__ */_jsx(IconButton, {
        variant: "outlined",
        children: /* @__PURE__ */_jsx(IconButton.Icon, {
          icon: Heart
        })
      }), /* @__PURE__ */_jsx(IconButton, {
        variant: "standard",
        children: /* @__PURE__ */_jsx(IconButton.Icon, {
          icon: Heart
        })
      })]
    }), /* @__PURE__ */_jsxs(XStack, {
      gap: "$4",
      children: [/* @__PURE__ */_jsx(Spinner, {}), /* @__PURE__ */_jsx(Spinner, {
        size: "large"
      })]
    }), /* @__PURE__ */_jsxs(XStack, {
      gap: "$4",
      children: [/* @__PURE__ */_jsxs(Chip, {
        children: [/* @__PURE__ */_jsx(Chip.Icon, {
          icon: Calendar
        }), /* @__PURE__ */_jsx(Chip.Text, {
          children: "Assist"
        })]
      }), /* @__PURE__ */_jsxs(Chip, {
        variant: "filter",
        children: [/* @__PURE__ */_jsx(Chip.Icon, {
          icon: Check
        }), /* @__PURE__ */_jsx(Chip.Text, {
          children: "Filter"
        })]
      }), /* @__PURE__ */_jsxs(Chip, {
        variant: "input",
        children: [/* @__PURE__ */_jsx(Chip.Text, {
          children: "Input"
        }), /* @__PURE__ */_jsx(Chip.Icon, {
          icon: X
        })]
      }), /* @__PURE__ */_jsx(Chip, {
        variant: "suggestion",
        children: /* @__PURE__ */_jsx(Chip.Text, {
          children: "Suggestion"
        })
      })]
    }), /* @__PURE__ */_jsx(XStack, {
      children: /* @__PURE__ */_jsx(SearchBar, {})
    }), /* @__PURE__ */_jsxs(XStack, {
      gap: "$4",
      children: [/* @__PURE__ */_jsx(Alert, {
        severity: "info",
        children: /* @__PURE__ */_jsxs(Alert.Container, {
          children: [/* @__PURE__ */_jsx(Alert.Heading, {
            children: "Info"
          }), /* @__PURE__ */_jsx(Alert.Text, {
            children: "Alert info text."
          })]
        })
      }), /* @__PURE__ */_jsx(Alert, {
        severity: "warning",
        children: /* @__PURE__ */_jsxs(Alert.Container, {
          children: [/* @__PURE__ */_jsx(Alert.Heading, {
            children: "Warning"
          }), /* @__PURE__ */_jsx(Alert.Text, {
            children: "Alert warning text."
          })]
        })
      }), /* @__PURE__ */_jsx(Alert, {
        severity: "success",
        children: /* @__PURE__ */_jsxs(Alert.Container, {
          children: [/* @__PURE__ */_jsx(Alert.Heading, {
            children: "Success"
          }), /* @__PURE__ */_jsx(Alert.Text, {
            children: "Alert success text."
          })]
        })
      }), /* @__PURE__ */_jsx(Alert, {
        severity: "error",
        children: /* @__PURE__ */_jsxs(Alert.Container, {
          children: [/* @__PURE__ */_jsx(Alert.Heading, {
            children: "Error"
          }), /* @__PURE__ */_jsx(Alert.Text, {
            children: "Alert error text."
          })]
        })
      })]
    }), /* @__PURE__ */_jsxs(XStack, {
      gap: "$4",
      ai: "center",
      children: [/* @__PURE__ */_jsx(H1, {
        children: "H1"
      }), /* @__PURE__ */_jsx(H2, {
        children: "H2"
      }), /* @__PURE__ */_jsx(H3, {
        children: "H3"
      }), /* @__PURE__ */_jsx(H4, {
        children: "H4"
      }), /* @__PURE__ */_jsx(H5, {
        children: "H5"
      }), /* @__PURE__ */_jsx(H6, {
        children: "H6"
      })]
    }), /* @__PURE__ */_jsx(Paragraph, {
      children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    })]
  });
};
export { Overview, components_stories_default as default };
//# sourceMappingURL=components.stories.native.js.map
