fulldev-ui 0.3.36 → 0.4.0-beta.0

package/src/components/_todo/Form.astro

@@ -1,36 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'form'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    structure?: 'column' | 'row' | 'group'
-  }
-
-const {
-  as = 'form',
-  space = 'auto',
-  structure = 'column',
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['form']}
-  {as}
-  {structure}
-  {space}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('form') {
-    display: flex;
-    width: 100%;
-    max-width: calc(var(--space-4) * 36);
-  }
-</style>

package/src/components/_todo/Prose.astro

@@ -1,139 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component>
-
-const { as = 'div', ...rest } = Astro.props
----
-
-<Component
-  class:list={['prose']}
-  {as}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  // @include component('prose') {
-  //   @media (min-width: 768px) {
-  //     padding-right: 15vw;
-  //     padding-left: 15vw;
-  //   }
-  //   @media (min-width: 1024px) {
-  //     padding-right: 25vw;
-  //     padding-left: 25vw;
-  //   }
-  // }
-
-  // Tables
-  .full.prose {
-    color: var(--text);
-    color: var(--color-11);
-    font-weight: var(--font-weight);
-    font-size: var(--text-2);
-    line-height: 1.7;
-    font-family: var(--font-family);
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      color: var(--color-12);
-      line-height: 1.2;
-    }
-
-    h1 {
-      font-size: var(--text-7);
-    }
-
-    h2 {
-      font-size: var(--text-6);
-    }
-
-    h3 {
-      font-size: var(--text-5);
-    }
-
-    h4 {
-      font-size: var(--text-4);
-    }
-
-    h5 {
-      font-size: var(--text-3);
-    }
-
-    h6 {
-      font-size: var(--text-2);
-    }
-
-    .display {
-      display: grid;
-      width: 100%;
-      max-width: none;
-
-      table {
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          margin: var(--space-2) 0;
-          font: 600 var(--text-2) 'Saira';
-
-          & + p {
-            color: var(--hue11);
-          }
-        }
-      }
-    }
-
-    table {
-      margin: var(--space-5) 0;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-1) !important;
-      border-collapse: collapse;
-      width: 100%;
-    }
-
-    th {
-      border-bottom: 1px solid var(--border);
-      background: var(--raised-background) !important;
-      color: var(--muted-foreground) !important;
-      font-weight: 500 !important;
-      font-size: var(--text-1) !important;
-    }
-
-    td {
-      color: var(--muted-foreground) !important;
-    }
-
-    th,
-    td {
-      padding: var(--space-2);
-    }
-
-    table a {
-      color: var(--solid) !important;
-      font-size: var(--text-1) !important;
-      line-height: 1 !important;
-      white-space: nowrap;
-    }
-
-    h6 {
-      margin: var(--space-2) 0;
-      font-size: var(--text-2) !important;
-    }
-
-    table a:hover {
-      text-decoration: underline;
-    }
-  }
-</style>

package/src/components/_todo/Writeup.astro

@@ -1,24 +0,0 @@
-<!-- ---
-import type { ComponentProps,HTMLTag,Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component>
-
-const { as = 'div', ...rest } = Astro.props
----
-
-<Component
-  class:list={['writeup']}
-  {as}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('writeup') {
-  }
-</style> -->

package/src/components/base/Button.astro

@@ -1,123 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-import Avatar from './Avatar.astro'
-import Icon from './Icon.astro'
-
-type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
-  variant?: 'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'link'
-  size?: 'sm' | 'md' | 'lg'
-  color?: 'base' | 'brand'
-  radius?: 'none' | 'auto' | 'full'
-  contrast?: boolean
-  html?: string
-  text?: string
-  icon?: string
-  label?: string
-  avatar?: string
-}
-
-const {
-  as = 'a',
-  variant = 'solid',
-  radius = 'auto',
-  contrast,
-  icon,
-  label,
-  avatar,
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['button']}
-  {as}
-  {variant}
-  {contrast}
-  {radius}
-  {...rest}
->
-  <slot />
-  <Icon name={icon} />
-  <Avatar src={avatar} />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('button') {
-    display: inline-flex;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    vertical-align: top;
-    gap: var(--space-2);
-    transition: background-color var(--transition);
-    cursor: pointer;
-    outline: none !important;
-    border: 1px solid var(--border);
-    background-color: var(--background);
-    padding-right: var(--space-4);
-    padding-left: var(--space-4);
-    height: calc(var(--text-1) + 2 * var(--space-4));
-    color: var(--text);
-    font-weight: var(--button-font-weight);
-    font-size: var(--text-1);
-    line-height: 1.625;
-    font-family: var(--button-font-family);
-    text-align: center;
-    text-decoration: none;
-    white-space: nowrap;
-
-    &:hover {
-      background-color: var(--background-hover);
-    }
-
-    &:active {
-      background-color: var(--background-active);
-    }
-
-    .avatar {
-      margin-right: calc(-1 * (var(--space-4)));
-      margin-left: var(--space-1);
-      padding: calc(var(--space-1) / 3);
-      width: calc(var(--text-1) + 2 * var(--space-4)) !important;
-      height: calc(var(--text-1) + 2 * var(--space-4)) !important;
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--focus) !important;
-      outline-offset: 2px;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    &.variant-link {
-      box-shadow: none;
-      border-color: transparent;
-      background-color: transparent;
-      padding: 0;
-      height: auto;
-
-      &:hover {
-        color: var(--colo-12);
-      }
-    }
-
-    &.radius-none {
-      border-radius: 0;
-    }
-
-    &.radius-auto {
-      border-radius: var(--radius-1);
-    }
-
-    &.radius-full {
-      border-radius: 9999px;
-    }
-  }
-</style>

package/src/components/base/Rating.astro

@@ -1,47 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-import Icon from './Icon.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  color?: 'base' | 'brand'
-  value?: number
-  size?: string
-  compact?: boolean
-}
-
-const { value, ...rest } = Astro.props
-
-const getIcon = (count: number) => {
-  if (!value) return
-  const difference = value - count
-  if (difference >= -0.25) return 'star-filled'
-  if (difference >= -0.75) return 'star-half-filled'
-  return 'star'
-}
----
-
-<Component
-  class:list={'rating'}
-  {...rest}
->
-  {
-    value &&
-      [1, 2, 3, 4, 5].map((_, i) => (
-        <Icon
-          name={getIcon(i + 1)}
-          class:list={'rating-icon-solid'}
-        />
-      ))
-  }
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('rating') {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-  }
-</style>

package/src/components/base/checkbox/Checkbox.astro

@@ -1,52 +0,0 @@
----
-import type { ComponentProps, Polymorphic } from 'astro/types'
-import '../../../css/utils.scss'
-import Component from '../../_Component.astro'
-import Label from '../../typography/Label.astro'
-import CheckboxElement from './CheckboxElement.astro'
-
-type Props<As extends 'div'> = Polymorphic<{ as: As }> & {
-  label?: string
-} & Pick<
-    ComponentProps<typeof CheckboxElement>,
-    'name' | 'disabled' | 'required' | 'checked'
-  > & {
-    color?: 'base' | 'brand'
-    contrast?: boolean
-  }
-
-const {
-  as = 'div',
-  label,
-  contrast,
-  icon,
-  name,
-  variant,
-  placeholder,
-  type,
-  value,
-  disabled,
-  checked,
-  required,
-  ...rest
-} = Astro.props
----
-
-<Component
-  structure="row"
-  class:list={['checkbox']}
-  {as}
-  {...rest}
->
-  <CheckboxElement
-    {name}
-    {disabled}
-    {required}
-    {checked}
-  />
-  <Label
-    for={name}
-    text={label}
-    {contrast}
-  />
-</Component>

package/src/components/base/checkbox/CheckboxElement.astro

@@ -1,31 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-
-type Props = Omit<HTMLAttributes<'input'>, 'type'> & {
-  color?: 'base' | 'brand'
-}
-
-const { name, ...rest } = Astro.props
----
-
-<Component
-  class:list={['checkbox-element']}
-  as="input"
-  type="checkbox"
-  id={name}
-  if={name}
-  {name}
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('checkbox-element') {
-    display: block;
-    width: var(--text-1);
-    height: var(--text-1);
-    accent-color: var(--color-9);
-  }
-</style>

package/src/components/base/input/Input.astro

@@ -1,79 +0,0 @@
----
-import type { ComponentProps, Polymorphic } from 'astro/types'
-import Component from '../../_Component.astro'
-import Label from '../../typography/Label.astro'
-import Icon from '../Icon.astro'
-import InputElement from './InputElement.astro'
-
-type Props<As extends 'div'> = Polymorphic<{ as: As }> &
-  Pick<
-    ComponentProps<typeof InputElement>,
-    | 'variant'
-    | 'placeholder'
-    | 'type'
-    | 'name'
-    | 'value'
-    | 'disabled'
-    | 'required'
-  > & {
-    color?: 'base' | 'brand'
-    label?: string
-    icon?: string
-  }
-
-const {
-  as = 'div',
-  variant = 'outline',
-  label,
-  icon,
-  // input attributes
-  placeholder,
-  name,
-  type,
-  value,
-  disabled,
-  required,
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['input']}
-  {as}
-  {...rest}
->
-  <Label
-    for={name}
-    text={label}
-  />
-  <InputElement
-    id={name}
-    {name}
-    {variant}
-    {placeholder}
-    {type}
-    {value}
-    {disabled}
-    {required}
-  />
-  <Icon name={icon} />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('input') {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    gap: var(--space-1);
-    width: 100%;
-
-    .icon {
-      position: absolute;
-      top: 50%;
-      right: var(--space-3);
-      transform: translateY(-50%);
-    }
-  }
-</style>

package/src/components/base/input/InputElement.astro

@@ -1,69 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-
-type Props = HTMLAttributes<'input'> & {
-  variant?: 'outline'
-}
-
-const {
-  placeholder,
-  name = placeholder,
-  variant = 'outline',
-  type = 'text',
-  ...rest
-} = Astro.props
----
-
-<Component
-  if={name}
-  as="input"
-  class="input-element"
-  {variant}
-  {placeholder}
-  {name}
-  {type}
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('input-element') {
-    display: flex;
-    position: relative;
-    align-items: center;
-    outline: none;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-1);
-    background-color: var(--background);
-    padding: var(--space-3);
-    width: 100%;
-    min-width: var(--space-3);
-    height: calc(var(--text-1) + 2 * var(--space-4));
-    color: var(--text);
-    font-weight: var(--font-weight);
-    font-size: var(--text-1);
-    line-height: 1.25;
-    font-family: var(--font-family);
-
-    &::placeholder {
-      color: var(--text);
-    }
-
-    &:hover {
-      outline: none;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 2px var(--border);
-    }
-
-    &:disabled {
-      opacity: 50%;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-</style>

package/src/components/base/radio/Radio.astro

@@ -1,66 +0,0 @@
-<!-- ---
-import type { Polymorphic } from 'astro/types'
-import '../../../css/utils.scss'
-import Component from '../../_Component.astro'
-import Row from '../../structure/Row.astro'
-import Label from '../../typography/Label.astro'
-import RadioElement from './RadioElement.astro'
-
-type Props<As extends 'div'> = Polymorphic<{ as: As }> & {
-  options?: string
-} & {
-  color?: 'base' | 'brand'
-  contrast?: boolean
-}
-
-const {
-  as = 'div',
-  options,
-  label,
-  contrast,
-  icon,
-  value,
-  disabled,
-  required,
-  name,
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['radio']}
-  {as}
-  {...rest}
->
-  <Label
-    for={name}
-    {...typeof label === 'string' ? { text: label } : label}
-  />
-  {
-    options?.map((option: any) => (
-      <Row>
-        <RadioElement
-          value={option}
-          id={option}
-        />
-        <Label
-          for={option}
-          text={option}
-          {contrast}
-        />
-      </Row>
-    ))
-  }
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('radio') {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    gap: var(--space-3);
-    width: 100%;
-  }
-</style> -->

package/src/components/base/radio/RadioElement.astro

@@ -1,34 +0,0 @@
-<!-- ---
-import type { HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-
-type Props = HTMLAttributes<'input'> & {
-  value?: string
-  label?: string
-  options?: string[]
-}
-
-const { label, value, name, options, ...rest } = Astro.props
----
-
-<Component
-  class:list={['radio-element']}
-  if={true}
-  as="input"
-  type="radio"
-  name={name}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('radio-element') {
-    display: block;
-    width: var(--text-1);
-    height: var(--text-1);
-    accent-color: var(--color-9);
-  }
-</style> -->