doccupine 0.0.97 → 0.0.99

package/dist/templates/shared-styles.d.ts

@@ -1 +0,0 @@
-export declare const sharedStyledTemplate = "\n\"use client\";\nimport {\n  mq,\n  resetButton,\n  styledH3,\n  styledSmall,\n  styledText,\n  Theme,\n} from \"cherry-styled-components/src/lib\";\nimport { rgba } from \"polished\";\nimport Link from \"next/link\";\nimport styled, { css } from \"styled-components\";\nimport { StyledH1 } from \"@/app/components/layout/Typography\";\n\nexport const interactiveStyles = css<{ theme: Theme }>`\n  transition: all 0.3s ease;\n  border: solid 1px transparent;\n  box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n\n  @media (hover: hover) {\n    &:hover {\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n\n  &:focus {\n    border-color: ${({ theme }) => theme.colors.primary};\n    box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n  }\n\n  &:active {\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nexport const StyledPriceHeader = styled.div<{ theme: Theme }>`\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding: 20px;\n  display: flex;\n  gap: 20px;\n\n  & strong {\n    margin: auto 0;\n    color: ${({ theme }) => theme.colors.dark};\n  }\n`;\n\nexport const StyledPrice = styled.span<{\n  theme: Theme;\n  $textAlign?: \"left\" | \"center\" | \"right\";\n}>`\n  color: ${({ theme }) => theme.colors.dark};\n  display: block;\n  font-weight: 800;\n  ${({ theme }) => styledH3(theme)}\n  ${({ $textAlign }) =>\n    $textAlign &&\n    css`\n      text-align: ${$textAlign};\n    `}\n`;\n\nexport const StyledSmall = styled.small<{\n  theme: Theme;\n  $textAlign?: \"left\" | \"center\" | \"right\";\n}>`\n  ${({ theme }) => styledSmall(theme)};\n  margin: auto 0;\n  display: block;\n  color: ${({ theme }) => theme.colors.grayDark};\n  ${({ $textAlign }) =>\n    $textAlign &&\n    css`\n      text-align: ${$textAlign};\n    `}\n`;\n\nexport const StyledMinHeight = styled.div`\n  min-height: calc(100svh - 100px);\n\n  ${mq(\"lg\")} {\n    min-height: calc(100svh - 120px);\n  }\n`;\n\nexport const StyledDataUserAvatar = styled.span<{ theme: Theme }>`\n  display: inline-flex;\n  justify-content: center;\n  min-width: 50px;\n  min-height: 50px;\n  border-radius: 50%;\n  border: solid 2px ${({ theme }) => theme.colors.grayLight};\n  background: ${({ theme }) => theme.colors.light};\n  position: relative;\n  overflow: hidden;\n  color: ${({ theme }) => theme.colors.primary};\n\n  & img {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n  }\n\n  & svg {\n    pointer-events: none;\n    margin: auto;\n    transition: none;\n  }\n`;\n\nexport const StyledDataArrowButton = styled.button<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  ${resetButton};\n  display: flex;\n  gap: 5px;\n  min-width: fit-content;\n\n  & .avatar,\n  & .clickable {\n    box-shadow: 0 0 0 0px ${({ theme }) => theme.colors.primary};\n    transition: all 0.3s ease;\n  }\n\n  & svg {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      & .lucide-chevron-down {\n        & path {\n          stroke: ${({ theme }) => theme.colors.primaryDark};\n        }\n      }\n\n      & .avatar,\n      & .clickable {\n        border-color: ${({ theme }) => theme.colors.primary};\n      }\n    }\n  }\n\n  &:focus {\n    & .avatar,\n    & .clickable {\n      border-color: ${({ theme }) => theme.colors.primary};\n      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n\n  &:active {\n    & .avatar,\n    & .clickable {\n      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n\n  & svg {\n    margin: auto 0;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      & .lucide-chevron-down {\n        transform: rotate(180deg);\n      }\n    `}\n`;\n\nexport const StyledDataSpan = styled.span<{ theme: Theme }>`\n  display: block;\n  font-weight: 500;\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme }) => theme.colors.primary};\n  font-family: ${({ theme }) => theme.fonts.text};\n`;\n\nexport const StyledDataDropdownHoverWrapper = styled.span<{\n  theme: Theme;\n  $align?: \"center\";\n}>`\n  position: relative;\n  display: block;\n  padding: 10px 0;\n  margin: -10px 0;\n\n  &:hover {\n    & ul {\n      pointer-events: all;\n      opacity: 1;\n      transform: ${({ $align }) =>\n        $align === \"center\"\n          ? \"translateX(-50%) translateY(0)\"\n          : \"translateY(0)\"};\n    }\n\n    & .lucide-chevron-down {\n      transform: rotate(180deg);\n    }\n  }\n\n  &:active {\n    & ul {\n      opacity: 0;\n    }\n  }\n`;\n\nexport const StyledDataDropdownWrapper = styled.span<{\n  theme: Theme;\n  $isAbsolute?: boolean;\n  $marginAuto?: boolean;\n}>`\n  position: relative;\n  display: flex;\n  padding: 10px 0;\n  margin: -10px 0;\n\n  & span {\n    display: flex;\n    margin: auto 0;\n  }\n\n  ${({ $isAbsolute }) =>\n    $isAbsolute &&\n    css`\n      margin: 0;\n      padding: 0;\n    `}\n\n  ${({ $marginAuto }) => $marginAuto && `margin: auto 0;`}\n`;\n\nexport const StyledDataDropdown = styled.ul<{\n  theme: Theme;\n  $isActive?: boolean;\n  $align?: \"left\" | \"center\";\n  $isTop?: boolean;\n  $isAbsolute?: boolean;\n  $minWidth?: string;\n}>`\n  position: absolute;\n  display: block;\n  top: 100%;\n  right: 0;\n  list-style: none;\n  transition: all 0.3s ease;\n  min-width: ${({ $minWidth }) => ($minWidth ? $minWidth : \"200px\")};\n  text-align: left;\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  background: ${({ theme }) => theme.colors.light};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  overflow: hidden;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  transition: all 0.3s ease;\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-10px);\n  z-index: 999;\n\n  ${({ $isAbsolute }) =>\n    $isAbsolute &&\n    css`\n      top: calc(100% + 56px);\n      right: 20px;\n    `}\n\n  ${({ $isTop }) => $isTop && `top: initial; bottom: 100%;`}\n\n  ${({ $align }) => $align === \"left\" && `right: initial; left: 0;`}\n  ${({ $align }) =>\n    $align === \"center\" &&\n    `right: initial; left: 50%; transform: translateX(-50%) translateY(-10px);`}\n\n  ${({ $isActive, $align }) =>\n    $isActive &&\n    css`\n      pointer-events: all;\n      opacity: 1;\n      transform: translateY(0);\n\n      ${$align === \"center\" &&\n      `right: initial; left: 50%; transform: translateX(-50%) translateY(0);`}\n    `}\n`;\n\nexport const StyledDataDropdownItem = styled.li<{ theme: Theme }>`\n  display: flex;\n  width: 100%;\n  text-align: left;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  &:last-of-type,\n  &:only-of-type {\n    border-bottom: none;\n  }\n\n  & form {\n    width: 100%;\n    margin: 0;\n    padding: 0;\n  }\n\n  & a,\n  & button,\n  & .logout-button {\n    ${resetButton};\n    width: 100%;\n    text-align: left;\n    padding: 12px 20px;\n    font-weight: 600;\n    font-family: inherit;\n    color: ${({ theme }) => theme.colors.primary};\n    font-size: ${({ theme }) => theme.fontSizes.text.lg};\n    text-decoration: none;\n    transition: all 0.3s ease;\n    border-radius: 0;\n    background: transparent;\n    display: flex;\n    gap: 10px;\n    height: auto;\n    min-height: 45px;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${({ theme }) =>\n          rgba(\n            theme.isDark ? theme.colors.primaryDark : theme.colors.primaryLight,\n            0.1,\n          )};\n        color: ${({ theme }) =>\n          theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark};\n      }\n    }\n\n    &:active,\n    &:focus {\n      box-shadow: none;\n    }\n\n    * {\n      margin: auto 0;\n    }\n\n    &:focus {\n      background-color: ${({ theme }) =>\n        rgba(\n          theme.isDark ? theme.colors.primaryDark : theme.colors.primaryLight,\n          0.15,\n        )};\n    }\n\n    &:active {\n      background-color: ${({ theme }) =>\n        rgba(\n          theme.isDark ? theme.colors.primaryDark : theme.colors.primaryLight,\n          0.2,\n        )};\n    }\n  }\n\n  & button {\n    border: none;\n\n    & svg {\n      margin: -2px -5px;\n    }\n  }\n`;\n\nexport const StyledDataDropdownButton = styled.button<{ theme: Theme }>`\n  ${resetButton};\n`;\n\nexport const StyledDataDropdownSelectWrapper = styled.span<{ theme: Theme }>`\n  padding: 5px;\n  display: block;\n  width: 100%;\n\n  & select {\n    width: 100%;\n  }\n`;\n\nexport const StyledDataTagButton = styled.button<{ theme: Theme }>`\n  ${resetButton};\n  position: absolute;\n  top: 0;\n  width: 24px;\n  height: 100%;\n  right: 0;\n  border-left: solid 1px\n    ${({ theme }) =>\n      rgba(theme.isDark ? theme.colors.dark : theme.colors.light, 0.2)};\n  transition: all 0.3s ease;\n\n  @media (hover: hover) {\n    &:hover {\n      background: ${({ theme }) =>\n        rgba(theme.isDark ? theme.colors.dark : theme.colors.light, 0.2)};\n    }\n  }\n\n  & svg {\n    width: 16px;\n    height: 100%;\n    vertical-align: middle;\n\n    & path {\n      stroke: ${({ theme }) =>\n        theme.isDark ? theme.colors.dark : theme.colors.light};\n    }\n  }\n`;\n\nexport const StyledDataTag = styled.span<{\n  theme: Theme;\n  $color?: \"default\" | \"warning\";\n  $capitalize?: boolean;\n}>`\n  display: inline-block;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  background: ${({ theme, $color }) =>\n    $color === \"warning\" ? theme.colors.warning : theme.colors.primary};\n  color: ${({ theme }) =>\n    theme.isDark ? theme.colors.dark : theme.colors.light};\n  font-size: ${({ theme }) => theme.fontSizes.small.xs};\n  position: relative;\n  font-weight: 500;\n  padding: 5px 10px;\n  margin: auto 0;\n  overflow: hidden;\n  ${({ $capitalize }) =>\n    $capitalize &&\n    css`\n      text-transform: capitalize;\n    `}\n\n  &:has(button) {\n    padding: 5px 35px 5px 10px;\n  }\n`;\n\nexport const StyledIllustration = styled.div<{ theme: Theme }>`\n  text-align: center;\n\n  & svg {\n    height: auto;\n    width: 250px;\n    margin: auto;\n  }\n`;\n\nexport const StyledIllustrationText = styled.p<{ theme: Theme }>`\n  color: ${({ theme }) => theme.colors.dark};\n  ${({ theme }) => styledSmall(theme)};\n`;\n\nexport const StyledDataText = styled.div<{ theme: Theme; $gray?: boolean }>`\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme, $gray }) =>\n    $gray ? theme.colors.grayDark : theme.colors.dark};\n`;\n\nexport const StyledDataHeader = styled.h1<{ theme: Theme }>`\n  ${({ theme }) => styledH3(theme)};\n  font-weight: 900;\n  color: ${({ theme }) => theme.colors.dark};\n`;\n\nexport const StyledMobileOnly = styled.em<{ theme: Theme }>`\n  font-style: normal;\n  display: inline;\n\n  ${mq(\"lg\")} {\n    display: none;\n  }\n`;\n\nexport const StyledDesktopOnly = styled.em<{ theme: Theme }>`\n  font-style: normal;\n  display: none;\n\n  ${mq(\"lg\")} {\n    display: inline;\n  }\n`;\n\nexport const StyledTinyMobileOnly = styled.em<{ theme: Theme }>`\n  font-style: normal;\n  display: flex;\n\n  @media screen and (min-width: 426px) {\n    display: none;\n  }\n`;\n\nexport const StyledTinyDesktopOnly = styled.em<{ theme: Theme }>`\n  font-style: normal;\n  display: none;\n\n  @media screen and (min-width: 426px) {\n    display: flex;\n  }\n`;\n\nexport const StyledAlignMiddle = styled.div<{ theme: Theme }>`\n  margin: auto 0;\n`;\n\nexport const StyledLoadingOverlay = styled.div<{\n  theme: Theme;\n  $isActive?: boolean;\n}>`\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ${({ theme }) => theme.colors.light};\n  z-index: 1000;\n  display: flex;\n  transition: all 0.3s ease;\n  opacity: 0;\n  pointer-events: none;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      opacity: 1;\n      pointer-events: all;\n    `}\n\n  & > * {\n    margin: auto;\n  }\n`;\n\nexport const StyledFlex1 = styled.div`\n  flex: 1;\n`;\n\nexport const StyledIconCircle = styled.span<{ theme: Theme }>`\n  border-radius: 50%;\n  width: 40px;\n  height: 40px;\n  min-width: 40px;\n  min-height: 40px;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  display: inline-flex;\n  color: ${({ theme }) => theme.colors.primary};\n  vertical-align: middle;\n\n  & svg {\n    margin: auto;\n  }\n`;\n\nexport const StyledStrong = styled.span<{ theme: Theme }>`\n  display: block;\n  margin: auto 0;\n  color: ${({ theme }) => theme.colors.primary};\n  font-weight: 700;\n`;\n\nexport const StyledTextMiddle = styled.span<{ theme: Theme }>`\n  display: block;\n  margin: auto 0;\n  color: ${({ theme }) => theme.colors.dark};\n  text-align: left;\n`;\n\nexport const StyledPanelWrapper = styled.div<{ theme: Theme }>`\n  position: relative;\n  z-index: 100;\n\n  & input {\n    position: relative;\n    z-index: 10;\n  }\n`;\n\nexport const StyledPanel = styled.div<{ theme: Theme; $absolute?: boolean }>`\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 2px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  margin: ${({ $absolute }) => ($absolute ? \"-10px 0 0 0\" : \"0\")};\n  ${({ $absolute }) =>\n    $absolute &&\n    css`\n      position: absolute;\n      width: 100%;\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    `}\n  max-height: calc(63px * 3);\n  overflow-y: auto;\n`;\n\nexport const StyledPanelLabel = styled.div<{ theme: Theme; $moveUp?: boolean }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.xs};\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.gray};\n  padding: ${({ $moveUp }) => ($moveUp ? \"20px 15px 10px\" : \"20px 15px\")};\n`;\n\nexport const StyledPanelContent = styled.div<{ theme: Theme }>`\n  display: flex;\n  padding: 15px;\n  gap: 10px;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  width: 100%;\n  text-align: left;\n  font-family: ${({ theme }) => theme.fonts.text};\n  font-size: ${({ theme }) => theme.fontSizes.text.xs};\n  line-height: ${({ theme }) => theme.lineHeights.text.xs};\n  font-weight: 500;\n  color: ${({ theme }) => theme.colors.primary};\n  transition: all 0.3s ease;\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.text.lg};\n    line-height: ${({ theme }) => theme.lineHeights.text.lg};\n  }\n\n  &:last-of-type {\n    border-bottom: none;\n  }\n`;\n\nexport const StyledPanelButton = styled(Link)<{ theme: Theme }>`\n  ${resetButton};\n  display: flex;\n  padding: 15px;\n  gap: 10px;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  width: 100%;\n  text-align: left;\n  font-family: ${({ theme }) => theme.fonts.text};\n  font-size: ${({ theme }) => theme.fontSizes.text.xs};\n  line-height: ${({ theme }) => theme.lineHeights.text.xs};\n  font-weight: 500;\n  color: ${({ theme }) => theme.colors.primary};\n  text-decoration: none;\n  transition: all 0.3s ease;\n\n  @media (hover: hover) {\n    &:hover {\n      background-color: ${({ theme }) => rgba(theme.colors.primaryLight, 0.1)};\n\n      & .link {\n        border-color: ${({ theme }) => theme.colors.primaryDark};\n      }\n    }\n  }\n\n  &:focus {\n    background-color: ${({ theme }) => rgba(theme.colors.primaryLight, 0.15)};\n\n    & .link {\n      box-shadow: 0 0 0 4px ${({ theme }) => theme.colors.primaryLight};\n      border-color: ${({ theme }) => theme.colors.primary};\n    }\n  }\n\n  &:active {\n    background-color: ${({ theme }) => rgba(theme.colors.primaryLight, 0.2)};\n\n    & .link {\n      box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n    }\n  }\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.text.lg};\n    line-height: ${({ theme }) => theme.lineHeights.text.lg};\n  }\n\n  &:last-of-type {\n    border-bottom: none;\n  }\n\n  & .link {\n    transition: all 0.3s ease;\n    pointer-events: none;\n  }\n`;\n\nexport const StyledPanelSpan = styled.span<{ theme: Theme }>`\n  margin: auto 0;\n  display: flex;\n  flex: 1;\n  line-height: 1.5;\n`;\n\nexport const editableContent = css<{ theme: Theme }>`\n  border: dotted 1px transparent;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  transition: all 0.3s ease;\n  outline: none;\n  cursor: text;\n\n  &:hover {\n    border: dotted 1px ${({ theme }) => theme.colors.gray};\n  }\n\n  &:focus {\n    border: dotted 1px ${({ theme }) => theme.colors.info};\n  }\n`;\n\nexport const StyledDataEditableText = styled.div<{\n  theme: Theme;\n  $gray?: boolean;\n}>`\n  ${({ theme }) => styledText(theme)};\n  color: ${({ theme, $gray }) =>\n    $gray ? theme.colors.grayDark : theme.colors.dark};\n\n  &[contenteditable=\"true\"] {\n    ${editableContent};\n  }\n`;\n\nexport const StyledSmallButtonWrapper = styled.div<{ theme: Theme }>`\n  position: relative;\n\n  & .hidden-button {\n    opacity: 0;\n    pointer-events: none;\n    transform: translateY(10px);\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      & .hidden-button {\n        opacity: 1;\n        pointer-events: all;\n        transform: translateY(0);\n      }\n    }\n  }\n`;\n\nexport const StyledSmallButton = styled.button<{\n  theme: Theme;\n}>`\n  ${resetButton};\n  display: flex;\n  gap: 5px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  color: ${({ theme }) => theme.colors.primary};\n  background: ${({ theme }) => theme.colors.light};\n  margin: auto 0;\n  min-width: fit-content;\n  ${interactiveStyles}\n\n  &.hidden-button {\n    position: absolute;\n    bottom: 1px;\n    right: 1px;\n    z-index: 98;\n  }\n`;\n\nexport const StyledTitle = styled(StyledH1)<{ theme: Theme }>`\n  display: block;\n\n  &[contenteditable=\"true\"] {\n    ${editableContent};\n  }\n`;\n\nexport const StyledImage = styled.img<{ theme: Theme; $maxWidth?: string }>`\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  max-width: ${({ $maxWidth }) => ($maxWidth ? $maxWidth : \"100%\")};\n  width: 100%;\n  height: auto;\n  border: 1px solid ${({ theme }) => theme.colors.grayLight};\n`;\n";