import React from 'react';
import { FormGroup, Text, Input, Label, Button, Box } from '../../index.js';
import StoryWrapper from '../../utils/story-wrapper.js';
const inputTypes = ['email', 'file', 'hidden', 'month', 'number', 'tel', 'text', 'time', 'url', 'week'];
export const Default = props => /*#__PURE__*/React.createElement(Box, {
  width: 1
}, /*#__PURE__*/React.createElement(StoryWrapper, {
  label: "Knobs example"
}, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Input, props), /*#__PURE__*/React.createElement(Button, {
  type: "submit"
}, "Submit"))));
export const Examples = () => /*#__PURE__*/React.createElement(Box, {
  width: 1
}, /*#__PURE__*/React.createElement(StoryWrapper, {
  label: "Regular input"
}, /*#__PURE__*/React.createElement(Input, {
  width: "300px",
  id: "input1",
  placeholder: "Simple input field..."
})), /*#__PURE__*/React.createElement(StoryWrapper, {
  label: "Disabled"
}, /*#__PURE__*/React.createElement(Input, {
  width: "300px",
  id: "input2",
  value: "I am disabled...",
  disabled: true
})), /*#__PURE__*/React.createElement(StoryWrapper, {
  label: "Without a border"
}, /*#__PURE__*/React.createElement(Text, {
  as: "span"
}, "Write your name: "), /*#__PURE__*/React.createElement(Input, {
  width: "300px",
  id: "input3",
  value: "Write something",
  borderless: true
})), /*#__PURE__*/React.createElement(StoryWrapper, {
  label: "different sizes"
}, /*#__PURE__*/React.createElement(Box, {
  mb: "xl",
  width: 1
}, /*#__PURE__*/React.createElement(Label, null, "Small:"), /*#__PURE__*/React.createElement(Input, {
  width: "300px",
  id: "input4",
  placeholder: "sm",
  variant: "sm"
})), /*#__PURE__*/React.createElement(Box, {
  mb: "xl",
  width: 1
}, /*#__PURE__*/React.createElement(Label, null, "Large:"), /*#__PURE__*/React.createElement(Input, {
  width: "300px",
  id: "input4",
  placeholder: "lg",
  variant: "lg"
})), /*#__PURE__*/React.createElement(Box, {
  mb: "xl",
  width: 1
}, /*#__PURE__*/React.createElement(Label, null, "Extra Large:"), /*#__PURE__*/React.createElement(Input, {
  width: "300px",
  id: "input4",
  placeholder: "lg",
  variant: "xl"
})), /*#__PURE__*/React.createElement(Box, {
  width: 1
}, /*#__PURE__*/React.createElement(Label, null, "Extra Large without a border:"), /*#__PURE__*/React.createElement(Input, {
  width: "300px",
  id: "input5",
  placeholder: "Title",
  variant: "xl",
  borderless: true
}))));
export default {
  title: 'DesignSystem/Atoms/Input',
  argTypes: {
    borderless: {
      defaultValue: false,
      control: {
        type: 'boolean'
      }
    },
    disabled: {
      defaultValue: false,
      control: {
        type: 'boolean'
      }
    },
    variant: {
      defaultValue: 'default',
      options: ['sm', 'lg', 'xl', 'default'],
      control: {
        type: 'select'
      }
    },
    width: {
      defaultValue: 0.5,
      control: {
        type: 'number',
        min: 0,
        max: 1,
        step: 0.1
      }
    },
    type: {
      defaultValue: 'text',
      options: inputTypes,
      control: {
        type: 'select'
      }
    }
  }
};