fulldev-ui 0.3.0-beta.3 → 0.3.3

package/src/components/base/Rating.astro

@@ -1,48 +1,49 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+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 }> &
-  ComponentProps<typeof Component> & {
-    value?: number | string
-  }
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  value?: number
+  size?: string
+  compact?: boolean
+}
+
+const { size, compact, value = 5, ...rest } = Astro.props
 
-const { value = Astro.props.html, ...rest } = Astro.props
+const getIcon = (count: number) => {
+  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(() => <Icon name="star-filled" />)}
+  {
+    [1, 2, 3, 4, 5].map((_, i) => (
+      <>
+        <Icon
+          size={size}
+          compact={compact}
+          name={getIcon(i + 1)}
+          class:list={'rating-icon-solid'}
+        />
+      </>
+    ))
+  }
 </Component>
 
 <style is:global lang="scss">
   @import '../../css/utils.scss';
 
   @include component('rating') {
-    display: flex;
-    gap: 0.75rem;
-    padding-left: 5px;
-
-    &.center {
-      padding-left: 0 !important;
-    }
-
-    i {
-      --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='m8.243 7.34l-6.38.925l-.113.023a1 1 0 0 0-.44 1.684l4.622 4.499l-1.09 6.355l-.013.11a1 1 0 0 0 1.464.944l5.706-3l5.693 3l.1.046a1 1 0 0 0 1.352-1.1l-1.091-6.355l4.624-4.5l.078-.085a1 1 0 0 0-.633-1.62l-6.38-.926l-2.852-5.78a1 1 0 0 0-1.794 0z'/%3E%3C/g%3E%3C/svg%3E");
-      -webkit-mask: var(--un-icon) no-repeat;
-      mask: var(--un-icon) no-repeat;
-      -webkit-mask-size: 100% 100%;
-      mask-size: 100% 100%;
-      margin-left: -0.4em;
-      background-color: currentColor;
-      width: 1em;
-      width: 1.25em;
-      height: 1em;
-      height: 1.25em;
-      color: var(--foreground);
-    }
+    display: inline-flex;
+    position: relative;
+    gap: var(--space-2);
   }
 </style>

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 {