@leebonggu/component-library/dist/esm/index.js

## Schedule

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { jsx } from 'react/jsx-runtime';
import { forwardRef, useState, createContext, useContext } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { transparentize } from 'polished';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { customAlphabet } from 'nanoid/non-secure';

var SECONDARY_COLOR = '#ced4da';
var SECONDARY_TEXT_COLOR = '#000';
var PRIMARY_COLOR = '#0a58ca';
var PRIMARY_TEXT_COLOR = '#fff';
var DANGER_COLOR = '#dc3545';
var DANGER_TEXT_COLOR = '#fff';
var DISABLED_OPACITY = 0.65;

/**
 * 리팩토링 가능
 */
var colorStyles = function colorStyles(p) {
  var color = SECONDARY_TEXT_COLOR;
  var backgroundColor = SECONDARY_COLOR;
  if (p.variant === 'primary') {
    color = PRIMARY_TEXT_COLOR;
    backgroundColor = PRIMARY_COLOR;
  } else if (p.variant === 'danger') {
    color = DANGER_TEXT_COLOR;
    backgroundColor = DANGER_COLOR;
  }
  return css(["color:", ";background-color:", ";border-color:", ";&:focus-visible{border-color:", ";box-shadow:0 0 0 0.2rem ", ";}"], color, backgroundColor, backgroundColor, color, transparentize(0.45, backgroundColor));
};
var StyledButton = styled.button.withConfig({
  displayName: "Buttonstyles__StyledButton",
  componentId: "sc-qti7yc-0"
})(["cursor:pointer;display:", ";width:", ";font-weight:400;text-align:center;vertical-align:middle;user-select:none;border:1px solid transparent;padding:", ";font-size:", ";line-height:1.5;border-radius:0;transition:all 0.15s ease-in-out;&:focus{outline:0;}&:disabled{cursor:inherit;opacity:", ";}", ""], function (p) {
  return p.isFullWidth ? 'block' : 'inline-block';
}, function (p) {
  return p.isFullWidth && '100%';
}, function (p) {
  if (p.size === 'lg') {
    return '0.5rem 1rem';
  } else if (p.size === 'sm') {
    return '0.25rem 0.5rem';
  }
  return '0.4rem 0.75rem';
}, function (p) {
  if (p.size === 'lg') {
    return '1.25rem';
  } else if (p.size === 'sm') {
    return '0.875rem';
  }
  return '1rem';
}, DISABLED_OPACITY, colorStyles);

var _excluded$1 = ["children", "variant", "size", "isFullWidth", "disabled"];
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var children = _ref.children,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'secondary' : _ref$variant,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'md' : _ref$size,
    _ref$isFullWidth = _ref.isFullWidth,
    isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    props = _objectWithoutProperties(_ref, _excluded$1);
  return jsx(StyledButton, _objectSpread$3(_objectSpread$3({
    ref: ref,
    variant: variant,
    size: size,
    isFullWidth: isFullWidth,
    disabled: disabled,
    type: "button"
  }, props), {}, {
    children: children
  }));
});
Button.propTypes = {
  variant: PropTypes.oneOf(['primary', 'secondary', 'danger']),
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  isFullWidth: PropTypes.bool
};
Button.displayName = 'Button';

var nanoid = customAlphabet('1234567890abcdef', 10);
var useUniqueId = function useUniqueId() {
  var _useState = useState(nanoid),
    _useState2 = _slicedToArray(_useState, 1),
    id = _useState2[0];
  return id;
};

var FieldContext = /*#__PURE__*/createContext(undefined);
var useFieldContext = function useFieldContext() {
  var context = useContext(FieldContext);
  if (context === undefined) {
    throw new Error('useFieldContext must be used within a FieldContext');
  }
  return context;
};

var StyledLabel = styled.label.withConfig({
  displayName: "Filedsstyles__StyledLabel",
  componentId: "sc-15k5s58-0"
})(["font-weight:500;margin-bottom:0.4rem;"]);
var StyledInput = styled.input.withConfig({
  displayName: "Filedsstyles__StyledInput",
  componentId: "sc-15k5s58-1"
})(["display:block;width:100%;padding:0.5rem 0.4rem;font-size:1rem;line-height:1.5;color:", ";background-color:transparent;border:1px solid ", ";appearance:none;border-radius:0;transition:all 0.15s ease-in-out;&:focus{outline:none;border-color:", ";box-shadow:0 0 0 0.2rem ", ";}&:disabled{background-color:", ";opacity:", ";}"], SECONDARY_TEXT_COLOR, SECONDARY_COLOR, PRIMARY_COLOR, transparentize(0.75, PRIMARY_COLOR), SECONDARY_COLOR, DISABLED_OPACITY);
var StyledTextarea = styled(StyledInput).attrs({
  as: 'textarea'
}).withConfig({
  displayName: "Filedsstyles__StyledTextarea",
  componentId: "sc-15k5s58-2"
})(["resize:", ";"], function (p) {
  return !p.isResizable && 'none';
});

function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var Label = /*#__PURE__*/forwardRef(function (props, ref) {
  var id = useFieldContext();
  return jsx(StyledLabel, _objectSpread$2(_objectSpread$2({
    ref: ref
  }, props), {}, {
    htmlFor: id
  }));
});
Label.displayName = 'Field.Label';

function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var Input = /*#__PURE__*/forwardRef(function (props, ref) {
  var id = useFieldContext();
  return jsx(StyledInput, _objectSpread$1({
    ref: ref,
    id: id
  }, props));
});
Input.displayName = 'Field.Input';

var _excluded = ["isResizable"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var Textarea = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _ref$isResizable = _ref.isResizable,
    isResizable = _ref$isResizable === void 0 ? true : _ref$isResizable,
    props = _objectWithoutProperties(_ref, _excluded);
  var id = useFieldContext();
  return jsx(StyledTextarea, _objectSpread({
    ref: ref,
    id: id,
    isResizable: isResizable
  }, props));
});
Textarea.displayName = 'Field.Textarea';
Textarea.propTypes = {
  isResizable: PropTypes.bool
};

var Field = function Field(_ref) {
  var children = _ref.children;
  var id = useUniqueId();
  return jsx(FieldContext.Provider, {
    value: id,
    children: children
  });
};
Field.Label = Label;
Field.Input = Input;
Field.Textarea = Textarea;

export { Button, Field };
//# sourceMappingURL=index.js.map