fulldev-ui 0.3.0-beta.3 → 0.3.2

package/src/components/base/Input.astro

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

package/src/components/base/Radio.astro

@@ -1,39 +0,0 @@
----
-import type { ComponentProps } from 'astro/types'
-
-type Props = ComponentProps<typeof Component>
-
-const { as = 'input', type = 'radio', name, ...rest } = Astro.props
----
-
-<Component
-  class:list={['radio']}
-  if={true}
-  {as}
-  type="radio"
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('radio') {
-    border-width: var(--border-width);
-    border-color: var(--border-color);
-    border-radius: var(--full-border-radius-2);
-    background: var(--background);
-    min-width: var(--element-2);
-    accent-color: var(--10);
-    font-size: var(--text-body);
-
-    &:hover {
-      border: var(--border-color-hover);
-      background: var(--background-hover);
-    }
-
-    &:active {
-      border: var(--border-color-active);
-      background: var(--background-active);
-    }
-  }
-</style>

package/src/components/base/Select.astro

@@ -1,69 +0,0 @@
----
-// TODO clean up the styling. Since before every component in Fullui was just one element, we should decide how we are going to handle situation like this where extra elements are needed.
-// I think we should split it up into multiple components, like SelectIcon etc. gr Sil
-import type { ComponentProps, Polymorphic } from 'astro/types'
-import { isObject } from 'radash'
-import Component from '../_Component.astro'
-import Icon from './Icon.astro'
-import SelectOption from './SelectOption.astro'
-
-type Props<As extends 'select'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    options?: (ComponentProps<typeof SelectOption> | string)[]
-  }
-
-const { as = 'select', options, ...rest } = Astro.props
----
-
-<Component
-  as="div"
-  class:list="select-wrapper"
-  {...rest}
->
-  <Component
-    as="select"
-    if={options}
-    class:list={['select input']}
-    {...rest}
-  >
-    <slot name="before" />
-    {
-      options?.map((option: any) => {
-        if (isObject(option)) return <SelectOption {...option} />
-        else return <SelectOption text={option} />
-      })
-    }
-    <slot />
-  </Component>
-  <div class="select-icon-wrapper">
-    <Icon
-      class="select-icon"
-      name="chevron-down"
-    />
-  </div>
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('select') {
-    appearance: none;
-  }
-
-  .select-icon-wrapper {
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: var(--element-2);
-    align-items: center;
-    margin: 0 !important;
-    padding: 0;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  .full.select-wrapper {
-    position: relative;
-    width: 100%;
-  }
-</style>

package/src/components/base/SelectOption.astro

@@ -1,27 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-
-type Props = Omit<HTMLAttributes<'option'>, 'slot'> & {
-  text?: string
-}
-
-const { text, ...rest } = Astro.props
----
-
-<option
-  class:list={['option']}
-  {...rest}
->
-  {text}
-  <slot />
-</option>
-
-<style>
-  .full.option {
-    color: var(--foreground);
-    font-weight: var(--font-weight);
-    font-size: var(--text-label);
-    line-height: 1;
-    font-family: var(--font-family);
-  }
-</style>

package/src/components/base/Textarea.astro

@@ -1,34 +0,0 @@
----
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'textarea'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component>
-
-const {
-  as = 'textarea',
-  rows = '5',
-  variant = 'outline',
-  name,
-  ...rest
-} = Astro.props
----
-
-<Component
-  class:list={['textarea input']}
-  if={true}
-  {rows}
-  {variant}
-  {as}
-  {...rest}
-/>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('textarea') {
-    height: calc((var(--text-1) + 2 * var(--element-3)) * 2);
-    min-height: calc((var(--text-1) + 2 * var(--element-3)) * 1);
-    resize: vertical;
-  }
-</style>

package/src/components/base/todo.md

@@ -1,7 +0,0 @@
-# Chores
-
-# New components
-- Stat (for displaying a number with a label)
-- Spinner (for loading states)
-- Bubble (for whatsapp chat bubbles etc)
-- Divider (for separating with a light border)

package/src/components/segment/Deck.astro

@@ -1,40 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import Component from '../_Component.astro'
-
-type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
-  scheme?: 'light' | 'dark'
-  color?: 'base' | 'brand'
-  compact?: boolean
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  structure?: 'grid' | 'carousel' | 'masonry' | 'bento' | 'row' | 'split'
-  frame?: 'wrapper' | 'container'
-}
-
-const { as = 'div', structure = 'grid', ...rest } = Astro.props
----
-
-<Component
-  class:list={['deck']}
-  {as}
-  {structure}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('deck') {
-    position: relative;
-    width: 100%;
-
-    // &.frame-fill {
-    //   margin-right: calc(var(--space-gutter) * -1);
-    //   margin-left: calc(var(--space-gutter) * -1);
-    //   padding: 0 var(--space-gutter) var(--space-3);
-    //   width: calc(100% + var(--space-gutter) * 2);
-    // }
-  }
-</style>

package/src/components/segment/Group.astro

@@ -1,29 +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> & {
-    color?: 'base' | 'brand'
-    size?: 'sm' | 'md' | 'lg'
-    structure?: 'row' | 'column' | 'wrap'
-  }
-
-const { ...rest } = Astro.props
----
-
-<Component
-  class:list={['group']}
-  {...rest}
->
-  <slot />
-</Component>
-
-<style is:global lang="scss">
-  @import '../../css/utils.scss';
-
-  @include component('group') {
-    justify-content: stretch;
-    align-items: center;
-  }
-</style>

package/src/components/typography/todo.md

@@ -1,3 +0,0 @@
-# New components
-- Highlight (for highlighint stuff in headings for example, with a primary background etc. Should accept same variants as badge)
-

package/src/css/color.css

@@ -1,88 +0,0 @@
-:root,
-.light,
-.light-theme,
-.theme-light,
-[data-theme='light'],
-.dark,
-.dark-theme,
-.theme-dark,
-[data-theme='dark'] {
-  --base-background: var(--base-1);
-  --base-background-surface: var(--base-surface);
-  --base-background-subtle: var(--base-2);
-  --base-background-soft: var(--base-3);
-  --base-background-hover: var(--base-4);
-  --base-background-active: var(--base-5);
-  --base-border: var(--base-6);
-  --base-border-outline: var(--base-7);
-  --base-border-hover: var(--base-8);
-  --base-solid: var(--base-9);
-  --base-solid-hover: var(--base-10);
-  --base-solid-contrast: var(--base-contrast);
-  --base-foreground: var(--base-11);
-  --base-foreground-contrast: var(--base-12);
-
-  --brand-background: var(--brand-1);
-  --brand-background-surface: var(--brand-surface);
-  --brand-background-subtle: var(--brand-2);
-  --brand-background-soft: var(--brand-3);
-  --brand-background-hover: var(--brand-4);
-  --brand-background-active: var(--brand-5);
-  --brand-border: var(--brand-6);
-  --brand-border-outline: var(--brand-7);
-  --brand-border-hover: var(--brand-8);
-  --brand-solid: var(--brand-9);
-  --brand-solid-hover: var(--brand-10);
-  --brand-solid-contrast: var(--brand-contrast);
-  --brand-foreground: var(--brand-11);
-  --brand-foreground-contrast: var(--brand-12);
-}
-
-/* --------------------------- */
-/* Generate colors */
-/* --------------------------- */
-
-:where(:root),
-:where(.theme-light),
-:where(.theme-dark),
-.color-base,
-.color-base
-  [class*='theme-']:not(.color-base [class*='color-'] [class*='theme-']):not(
-    .color-base [class*='color-'][class*='theme-']
-  ) {
-  --background: var(--base-background);
-  --background-surface: var(--base-background-surface);
-  --background-subtle: var(--base-background-subtle);
-  --background-soft: var(--base-background-soft);
-  --background-hover: var(--base-background-hover);
-  --background-active: var(--base-background-active);
-  --border: var(--base-border);
-  --border-outline: var(--base-border-outline);
-  --border-hover: var(--base-border-hover);
-  --solid: var(--base-solid);
-  --solid-hover: var(--base-solid-hover);
-  --solid-contrast: var(--base-solid-contrast);
-  --foreground: var(--base-foreground);
-  --foreground-contrast: var(--base-foreground-contrast);
-}
-
-.color-brand,
-.color-brand
-  [class*='theme-']:not(.color-brand [class*='color-'] [class*='theme-']):not(
-    .color-brand [class*='color-'][class*='theme-']
-  ) {
-  --background: var(--brand-background);
-  --background-surface: var(--brand-background-surface);
-  --background-subtle: var(--brand-background-subtle);
-  --background-soft: var(--brand-background-soft);
-  --background-hover: var(--brand-background-hover);
-  --background-active: var(--brand-background-active);
-  --border: var(--brand-border);
-  --border-outline: var(--brand-border-outline);
-  --border-hover: var(--brand-border-hover);
-  --solid: var(--brand-solid);
-  --solid-hover: var(--brand-solid-hover);
-  --solid-contrast: var(--brand-solid-contrast);
-  --foreground: var(--brand-foreground);
-  --foreground-contrast: var(--brand-foreground-contrast);
-}

package/src/css/props/align.scss

@@ -1,20 +0,0 @@
-.align-start {
-  align-items: flex-start;
-}
-
-.align-center {
-  align-items: center;
-  text-align: var(--space-x, center);
-
-  & > * > * {
-    text-align: left;
-  }
-}
-
-.align-end {
-  align-items: flex-end;
-}
-
-.align-stretch {
-  align-items: stretch;
-}

package/src/css/props/frame.scss

@@ -1,153 +0,0 @@
-:root {
-  --screen: 1536px;
-}
-
-.frame-wrapper,
-.frame-viewport,
-.frame-container,
-.frame-panel {
-  --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
-}
-
-.frame-wrapper,
-.frame-viewport {
-  --inner-x: var(--gutter);
-
-  padding-right: var(--gutter);
-  padding-left: var(--gutter);
-  width: 100%;
-  max-width: 100%;
-  overflow: hidden;
-
-  &:is(.split > &) {
-    @media (min-width: 768px) {
-      &:not(:first-child) {
-        padding-left: 0;
-      }
-
-      &:not(:last-child) {
-        padding-right: 0;
-      }
-    }
-  }
-}
-
-.frame-viewport {
-  min-height: 100%;
-}
-
-.frame-container {
-  margin-right: var(--gutter);
-  margin-left: var(--gutter);
-  max-width: calc(100% - var(--gutter) * 2);
-
-  &:is(.split > &) {
-    @media (min-width: 768px) {
-      &:not(:first-child) {
-        margin-left: 0;
-      }
-
-      &:not(:last-child) {
-        margin-right: 0;
-      }
-    }
-  }
-}
-
-.frame-panel {
-  --inner-x: var(--space-6);
-  --inner-y: var(--space-6);
-
-  position: relative;
-  border-radius: var(--radius-3);
-  padding: var(--inner-y) var(--inner-x);
-  width: 100%;
-  overflow: hidden;
-
-  &.section {
-    --inner-x: min(var(--gutter), var(--space-6));
-
-    margin-right: var(--gutter);
-    margin-left: var(--gutter);
-    max-width: calc(100% - var(--gutter) * 2);
-  }
-}
-
-.frame-inset {
-  &:is(.structure-column > &) {
-    margin-right: calc(var(--inner-x) * -1);
-    margin-left: calc(var(--inner-x) * -1);
-    width: calc(100% + var(--inner-x) * 2);
-
-    &:first-child {
-      margin-top: calc(var(--inner-y) * -1);
-      height: calc(100% + var(--inner-y) * 1);
-    }
-
-    &:last-child {
-      margin-bottom: calc(var(--inner-y) * -1);
-      height: calc(100% + var(--inner-y) * 1);
-    }
-  }
-
-  &:is(.structure-split > &) {
-    @media (max-width: 1023.999px) {
-      margin-right: calc(var(--inner-x) * -1);
-      margin-left: calc(var(--inner-x) * -1);
-      width: calc(100% + var(--inner-x) * 2);
-
-      &:first-child {
-        margin-top: calc(var(--inner-y) * -1);
-        height: calc(100% + var(--inner-y) * 1);
-      }
-
-      &:last-child {
-        margin-bottom: calc(var(--inner-y) * -1);
-        height: calc(100% + var(--inner-y) * 1);
-      }
-    }
-
-    @media (min-width: 1024px) {
-      margin-top: calc(var(--inner-y) * -1);
-      margin-bottom: calc(var(--inner-y) * -1);
-      height: calc(100% + var(--inner-y) * 2);
-
-      &:first-child {
-        margin-left: calc(var(--inner-x) * -1);
-        width: calc(100% + var(--inner-x) * 1);
-      }
-
-      &:last-child {
-        margin-right: calc(var(--inner-x) * -1);
-        width: calc(100% + var(--inner-x) * 1);
-      }
-    }
-  }
-}
-
-.frame-cover {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.frame-background {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  order: 1;
-  z-index: -1;
-  margin: 0 !important;
-  border-radius: 0;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  object-fit: cover;
-
-  ~ .full {
-    position: relative;
-    z-index: 1;
-  }
-}

package/src/css/props/mask

@@ -1 +0,0 @@
-

package/src/css/props/position.scss

@@ -1,33 +0,0 @@
-.position-background {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  order: 1;
-  z-index: -1;
-  margin: 0 !important;
-  border-radius: 0;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  object-fit: cover;
-
-  ~ .full {
-    position: relative;
-    z-index: 1;
-  }
-}
-
-.position-cover {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.position-container {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  object-position: center;
-}

package/src/css/props/ratio

@@ -1 +0,0 @@
-