fulldev-ui 0.3.35 → 0.4.0-beta.0

package/src/components/base/select/Select.astro

@@ -1,90 +0,0 @@
----
-import type {
-  ComponentProps,
-  HTMLAttributes,
-  HTMLTag,
-  Polymorphic,
-} from 'astro/types'
-import Component from '../../_Component.astro'
-import Label from '../../typography/Label.astro'
-import Icon from '../Icon.astro'
-import { default as SelectElement } from './SelectElement.astro'
-import SelectOption from './SelectOption.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
-  Pick<ComponentProps<typeof SelectElement>, 'name' | 'required' | 'disabled'> &
-  HTMLAttributes<'select'> & {
-    color?: 'base' | 'brand'
-    label?: string
-    placeholder?: string
-    options?: string[]
-    value?: string
-  }
-
-const {
-  as = 'div',
-  label,
-  placeholder,
-  options,
-  value,
-  // select attributes
-  name,
-  required,
-  disabled,
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['select']}
-  {as}
-  {...rest}
->
-  <Label
-    for={name}
-    text={label}
-  />
-  <SelectElement
-    id={name}
-    {name}
-    {required}
-    {disabled}
-  >
-    <SelectOption
-      text={placeholder}
-      disabled
-      selected
-    />
-    {
-      options?.map((option: any) => (
-        <SelectOption
-          selected={value === option}
-          text={option}
-          value={option}
-        />
-      ))
-    }
-    <slot />
-  </SelectElement>
-  <Icon name="chevron-down" />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('select') {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    gap: var(--space-1);
-    width: 100%;
-
-    .icon {
-      position: absolute;
-      right: var(--space-4);
-      bottom: var(--space-4);
-      width: var(--text-1);
-      height: var(--text-1);
-    }
-  }
-</style>

package/src/components/base/select/SelectElement.astro

@@ -1,56 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-
-type Props = HTMLAttributes<'select'>
-
-const { ...rest } = Astro.props
----
-
-<Component
-  class:list={['select-element']}
-  as="select"
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('select-element') {
-    display: flex;
-    position: relative;
-    align-items: center;
-    appearance: none;
-    appearance: none;
-    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);
-
-    &: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/select/SelectOption.astro

@@ -1,32 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-
-type Props = HTMLAttributes<'option'> & {
-  text?: string
-}
-
-const { value, text, ...rest } = Astro.props
----
-
-<Component
-  class:list={['select-option']}
-  as="option"
-  value={value ?? text}
-  text={text ?? value}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('select-option') {
-    color: var(--text);
-    font-weight: var(--font-weight);
-    font-size: var(--text-1);
-    line-height: 1;
-    font-family: var(--font-family);
-  }
-</style>

package/src/components/base/switch/Switch.astro

@@ -1,55 +0,0 @@
----
-import type { ComponentProps, Polymorphic } from 'astro/types'
-import Component from '../../_Component.astro'
-import Label from '../../typography/Label.astro'
-import SwitchElement from './SwitchElement.astro'
-
-type Props<As extends 'div'> = Polymorphic<{ as: As }> &
-  Pick<ComponentProps<typeof SwitchElement>, 'name' | 'checked'> & {
-    color?: 'base' | 'brand'
-    true?: string
-    false?: string
-  }
-
-const {
-  as = 'div',
-  name,
-  checked,
-  trueLabel,
-  falseLabel,
-  ...rest
-} = Astro.props
----
-
-<Component
-  structure="row"
-  class:list={['switch']}
-  {as}
-  {...rest}
->
-  <Label
-    for={name}
-    text={falseLabel}
-  />
-  <SwitchElement
-    id={name}
-    {name}
-    {checked}
-  />
-  <Label
-    for={name}
-    text={trueLabel}
-  />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('switch') {
-    position: relative;
-    align-items: center;
-    gap: var(--space-1);
-
-    width: 100%;
-  }
-</style>

package/src/components/base/switch/SwitchElement.astro

@@ -1,84 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-
-type Props = HTMLAttributes<'input'> & {
-  name?: string
-  color?: 'base' | 'brand'
-}
-
-const { name, checked, ...rest } = Astro.props
----
-
-<Component
-  as="label"
-  for={name}
-  class:list="switch-element"
-  if={true}
-  {...rest}
->
-  <input
-    {checked}
-    name={name}
-    type="checkbox"
-    class="checkbox"
-  />
-  <div class="checkmark"></div>
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('switch-element') {
-    display: block;
-    position: relative;
-    transition: var(--transition);
-    cursor: pointer;
-    box-sizing: border-box;
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background-color: var(--background);
-    padding: var(--space-1);
-    width: fit-content;
-    min-width: calc(
-      (var(--text-1) + 2 * var(--space-2) * 2) + 2 * var(--space-1)
-    );
-    height: calc(var(--text-1) + 2 * var(--space-2));
-
-    .checkbox {
-      position: absolute;
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-
-    .checkmark {
-      transform: 0%;
-      transition: var(--transition);
-      border-radius: 999px;
-      background-color: var(--border);
-      width: 50%;
-      height: 100%;
-    }
-
-    .checkbox:checked ~ .checkmark {
-      transform: translateX(100%);
-      background-color: var(--color-12);
-    }
-
-    &:hover {
-      background-color: var(--hover);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--focus) !important;
-      outline-offset: 2px;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-  }
-</style>

package/src/components/base/table/Table.astro

@@ -1,57 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-import TableBody from './TableBody.astro'
-import TableFooter from './TableFooter.astro'
-import TableHeader from './TableHeader.astro'
-
-type Props = HTMLAttributes<'table'> & {
-  color?: 'base' | 'brand'
-  size?: 'sm' | 'md' | 'lg'
-  header?:
-    | ComponentProps<typeof TableHeader>
-    | ComponentProps<typeof TableHeader>['cells']
-  body?:
-    | ComponentProps<typeof TableBody>
-    | ComponentProps<typeof TableBody>['rows']
-  footer?:
-    | ComponentProps<typeof TableFooter>
-    | ComponentProps<typeof TableFooter>['cells']
-}
-
-const { header, body, footer, ...rest } = Astro.props
----
-
-<Component
-  class:list={['table']}
-  as="table"
-  {...rest}
->
-  <TableHeader {...Array.isArray(header) ? { cells: header } : header} />
-
-  {Array.isArray(body) ? <TableBody rows={body} /> : <TableBody {...body} />}
-
-  {
-    Array.isArray(footer) ? (
-      <TableFooter cells={footer} />
-    ) : (
-      <TableFooter {...footer} />
-    )
-  }
-
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('table') {
-    display: table;
-    box-shadow: 0 0 0 1px var(--border);
-    border-radius: var(--radius-1);
-    border-collapse: collapse;
-    width: 100%;
-    caption-side: bottom;
-    overflow: hidden;
-  }
-</style>

package/src/components/base/table/TableBody.astro

@@ -1,38 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-import TableRow from './TableRow.astro'
-
-type Props = HTMLAttributes<'tbody'> & {
-  rows?: (
-    | ComponentProps<typeof TableRow>
-    | ComponentProps<typeof TableRow>['cells']
-  )[]
-}
-
-const { rows, ...rest } = Astro.props
----
-
-<Component
-  class:list={['table-body']}
-  as="tbody"
-  {...rest}
->
-  {
-    rows?.map((row) => {
-      if (Array.isArray(row)) return <TableRow cells={row} />
-      else return <TableRow {...row} />
-    })
-  }
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('table-body') {
-    display: table-row-group;
-    vertical-align: middle;
-    unicode-bidi: isolate;
-  }
-</style>

package/src/components/base/table/TableCell.astro

@@ -1,30 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-
-type Props = HTMLAttributes<'td'> & {
-  html?: string
-  text?: string
-}
-
-const { ...rest } = Astro.props
----
-
-<Component
-  class:list={['table-cell']}
-  as="td"
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('table-cell') {
-    vertical-align: middle;
-    padding: var(--space-3) var(--space-4);
-    color: var(--color-11);
-    font-size: var(--text-1);
-  }
-</style>

package/src/components/base/table/TableFooter.astro

@@ -1,48 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-import TableCell from './TableCell.astro'
-import TableRow from './TableRow.astro'
-
-type Props = HTMLAttributes<'tfoot'> & {
-  cells?: (
-    | ComponentProps<typeof TableCell>
-    | ComponentProps<typeof TableCell>['html']
-  )[]
-}
-
-const { cells, ...rest } = Astro.props
----
-
-<Component
-  class:list={['table-footer']}
-  as="tfoot"
-  {...rest}
->
-  {
-    cells && (
-      <TableRow>
-        {cells?.map((cell) => {
-          if (typeof cell === 'string') return <TableCell html={cell} />
-          else return <TableCell {...cell} />
-        })}
-      </TableRow>
-    )
-  }
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('table-footer') {
-    display: table-footer-group;
-    border-top: 1px solid var(--border);
-    background-color: var(--color-3);
-    color: var(--color-12);
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-</style>

package/src/components/base/table/TableHead.astro

@@ -1,31 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-
-type Props = HTMLAttributes<'th'> & {
-  html?: string
-  text?: string
-}
-
-const { ...rest } = Astro.props
----
-
-<Component
-  class:list={['table-head']}
-  as="th"
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('table-head') {
-    vertical-align: middle;
-    padding: var(--space-3) var(--space-4);
-    color: var(--color-12);
-    font-size: var(--text-1);
-    text-align: left;
-  }
-</style>

package/src/components/base/table/TableHeader.astro

@@ -1,44 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-import TableHead from './TableHead.astro'
-import TableRow from './TableRow.astro'
-
-type Props = HTMLAttributes<'thead'> & {
-  cells?: (
-    | ComponentProps<typeof TableHead>
-    | ComponentProps<typeof TableHead>['html']
-  )[]
-}
-
-const { cells, ...rest } = Astro.props
----
-
-<Component
-  class:list={['table-header']}
-  as="thead"
-  {...rest}
->
-  <TableRow>
-    {
-      cells?.map((cell) => {
-        if (typeof cell === 'string') return <TableHead html={cell} />
-        else return <TableHead {...cell} />
-      })
-    }
-  </TableRow>
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('table-header') {
-    border-bottom: 1px solid var(--color-6);
-    background-color: var(--color-3);
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-</style>

package/src/components/base/table/TableRow.astro

@@ -1,46 +0,0 @@
----
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Component from '../../_Component.astro'
-import TableCell from './TableCell.astro'
-
-type Props = HTMLAttributes<'tr'> & {
-  cells?: (
-    | ComponentProps<typeof TableCell>
-    | ComponentProps<typeof TableCell>['text']
-  )[]
-}
-
-const { cells, ...rest } = Astro.props
----
-
-<Component
-  class:list={['table-row']}
-  {...rest}
-  as="tr"
->
-  {
-    cells?.map((cel) => {
-      if (typeof cel === 'string') return <TableCell text={cel} />
-      else return <TableCell {...cel} />
-    })
-  }
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('table-row') {
-    border-bottom: 1px solid var(--color-6);
-    background-color: var(--color-2);
-
-    &:is(.table-header > &),
-    &:is(.table-footer > &) {
-      background-color: var(--color-3);
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-</style>

package/src/components/base/textarea/Textarea.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 TextareaElement from './TextareaElement.astro'
-
-type Props<As extends 'div'> = Polymorphic<{ as: As }> &
-  Pick<
-    ComponentProps<typeof TextareaElement>,
-    | 'variant'
-    | 'placeholder'
-    | 'name'
-    | 'value'
-    | 'disabled'
-    | 'required'
-    | 'rows'
-  > & {
-    color?: 'base' | 'brand'
-    label?: string
-    icon?: string
-  }
-
-const {
-  as = 'div',
-  label,
-  icon,
-  variant,
-  // textarea attributes
-  name,
-  rows,
-  placeholder,
-  value,
-  disabled,
-  required,
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['textarea']}
-  {as}
-  {...rest}
->
-  <Label
-    for={name}
-    text={label}
-  />
-  <TextareaElement
-    id={name}
-    {name}
-    {variant}
-    {placeholder}
-    {value}
-    {disabled}
-    {required}
-    {rows}
-  />
-  <Icon name={icon} />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../../css/utils.scss';
-
-  @include component('textarea') {
-    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>