fulldev-ui 0.3.0-beta.2 → 0.3.2

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

@@ -0,0 +1,52 @@
+---
+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

@@ -0,0 +1,31 @@
+---
+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

@@ -0,0 +1,79 @@
+---
+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
+  name,
+  placeholder,
+  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

@@ -0,0 +1,60 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Component from '../../_Component.astro'
+
+type Props = HTMLAttributes<'input'> & {
+  variant?: 'outline'
+}
+
+const { variant = 'outline', type = 'text', ...rest } = Astro.props
+---
+
+<Component
+  as="input"
+  class="input-element"
+  if={true}
+  {variant}
+  {...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

@@ -0,0 +1,66 @@
+---
+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

@@ -0,0 +1,34 @@
+---
+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>

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

@@ -0,0 +1,90 @@
+---
+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}
+    {...typeof label === 'string' ? { text: label } : 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

@@ -0,0 +1,56 @@
+---
+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

@@ -0,0 +1,32 @@
+---
+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

@@ -0,0 +1,55 @@
+---
+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.astro → switch/SwitchElement.astro}

@@ -1,22 +1,24 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
+import type { HTMLAttributes } from 'astro/types'
+import Component from '../../_Component.astro'
 
-type Props<As extends HTMLTag = 'span'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    name?: string
-  }
+type Props = HTMLAttributes<'input'> & {
+  name?: string
+  color?: 'base' | 'brand'
+}
 
-const { as = 'input', name, ...rest } = Astro.props
+const { name, checked, ...rest } = Astro.props
 ---
 
 <Component
   as="label"
-  class:list="switch"
+  for={name}
+  class:list="switch-element"
   if={true}
   {...rest}
 >
   <input
+    {checked}
     name={name}
     type="checkbox"
     class="checkbox"
@@ -25,9 +27,9 @@ const { as = 'input', name, ...rest } = Astro.props
 </Component>
 
 <style is:global lang="scss">
-  @import '../../css/utils.scss';
+  @import '../../../css/utils.scss';
 
-  @include component('switch') {
+  @include component('switch-element') {
     display: block;
     position: relative;
     transition: var(--transition);
@@ -39,9 +41,9 @@ const { as = 'input', name, ...rest } = Astro.props
     padding: var(--space-1);
     width: fit-content;
     min-width: calc(
-      (var(--text-label) + 2 * var(--element-1) * 2) + 2 * var(--space-1)
+      (var(--text-1) + 2 * var(--space-2) * 2) + 2 * var(--space-1)
     );
-    height: calc(var(--text-label) + 2 * var(--element-1));
+    height: calc(var(--text-1) + 2 * var(--space-2));
 
     .checkbox {
       position: absolute;
@@ -61,7 +63,7 @@ const { as = 'input', name, ...rest } = Astro.props
 
     .checkbox:checked ~ .checkmark {
       transform: translateX(100%);
-      background-color: var(--solid);
+      background-color: var(--color-12);
     }
 
     &:hover {

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

@@ -0,0 +1,55 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import { TableBody, TableFooter, TableHeader } from 'fulldev-ui'
+import Component from '../../_Component.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>