@balikjs/mobile 0.0.2 → 0.1.0

package/src/Select/Select.module.css

@@ -1,174 +0,0 @@
-.root {
-  width: 100%;
-}
-
-.triggerBase {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--_trigger-border-color);
-  border-radius: var(--_border-radius);
-  font-family: inherit;
-  outline: none;
-  box-shadow: none;
-  appearance: none;
-  touch-action: manipulation;
-  transition: background-color var(--b-transition-fast),
-    border-color var(--b-transition-fast),
-    color var(--b-transition-fast);
-  cursor: pointer;
-  text-align: start;
-  color: var(--base-fg);
-
-  --_current-intent: var(--base-edge);
-  --_trigger-border-color: var(--_current-intent);
-}
-
-.triggerBase[data-placeholder-shown] {
-  color: var(--color-disabled-fg);
-}
-
-.triggerBase:disabled {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-  color: var(--color-disabled-fg);
-}
-
-.triggerSizeXs {
-  height: var(--b-comp-height-xs);
-  line-height: var(--b-comp-line-height-xs);
-  padding: var(--b-comp-padding-y-xs) var(--b-comp-padding-x-xs);
-  font-size: var(--b-comp-font-size-xs);
-  --_border-radius: var(--b-radius-l2-xs);
-}
-
-.triggerSizeSm {
-  height: var(--b-comp-height-sm);
-  line-height: var(--b-comp-line-height-sm);
-  padding: var(--b-comp-padding-y-sm) var(--b-comp-padding-x-sm);
-  font-size: var(--b-comp-font-size-sm);
-  --_border-radius: var(--b-radius-l2-sm);
-}
-
-.triggerSizeMd {
-  height: var(--b-comp-height-md);
-  line-height: var(--b-comp-line-height-md);
-  padding: var(--b-comp-padding-y-md) var(--b-comp-padding-x-md);
-  font-size: var(--b-comp-font-size-md);
-  --_border-radius: var(--b-radius-l2-md);
-}
-
-.triggerSizeLg {
-  height: var(--b-comp-height-lg);
-  line-height: var(--b-comp-line-height-lg);
-  padding: var(--b-comp-padding-y-lg) var(--b-comp-padding-x-lg);
-  font-size: var(--b-comp-font-size-lg);
-  --_border-radius: var(--b-radius-l2-lg);
-}
-
-.triggerSizeXl {
-  height: var(--b-comp-height-xl);
-  line-height: var(--b-comp-line-height-xl);
-  padding: var(--b-comp-padding-y-xl) var(--b-comp-padding-x-xl);
-  font-size: var(--b-comp-font-size-xl);
-  --_border-radius: var(--b-radius-l2-xl);
-}
-
-.indicator {
-  margin-inline-start: auto;
-  display: flex;
-  align-items: center;
-  transition: transform var(--b-transition-fast);
-  color: var(--base-fg);
-}
-
-.backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: var(--b-z-index-modal);
-  background-color: rgba(0, 0, 0, 0.35);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-}
-
-.backdrop[data-open] {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.sheet {
-  position: fixed;
-  inset-inline: 0;
-  bottom: 0;
-  z-index: var(--b-z-index-modal);
-  background-color: var(--base-bg);
-  border-radius: 16px 16px 0 0;
-  max-height: 70vh;
-  display: flex;
-  flex-direction: column;
-  transform: translateY(100%);
-  transition: transform 0.3s ease;
-}
-
-.sheet[data-open] {
-  transform: translateY(0);
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid color-mix(in oklch, var(--base-fg) 6%, var(--base-bg));
-  flex-shrink: 0;
-}
-
-.title {
-  font-size: var(--b-comp-font-size-lg);
-  font-weight: 600;
-}
-
-.cancelBtn {
-  font-size: var(--b-comp-font-size-md);
-  color: var(--base-edge);
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  touch-action: manipulation;
-}
-
-.list {
-  overflow-y: auto;
-  padding: 8px 0;
-  flex: 1;
-  -webkit-overflow-scrolling: touch;
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  padding: 14px 20px;
-  font-size: var(--b-comp-font-size-lg);
-  cursor: pointer;
-  color: var(--base-fg);
-  transition: background-color 0.1s ease;
-}
-
-.item:active {
-  background-color: color-mix(in oklch, var(--base-fg) 4%, var(--base-bg));
-}
-
-.item[data-selected] {
-  color: var(--base-edge);
-  font-weight: 600;
-}
-
-.item[data-disabled] {
-  color: var(--color-disabled-fg);
-  pointer-events: none;
-}

package/src/Select/index.js

@@ -1 +0,0 @@
-export { Select } from './Select.jsx'

package/src/SelectPc/Select.jsx

@@ -1,88 +0,0 @@
-import { splitProps, mergeProps, For } from 'solid-js'
-import { Select as ArkSelect } from '@ark-ui/solid'
-import { ChevronDown } from 'lucide-solid'
-import styles from './SelectPc.module.css'
-
-const triggerVariants = {
-  outline: styles.triggerVariantOutline,
-}
-
-const triggerSizes = {
-  xs: styles.triggerSizeXs,
-  sm: styles.triggerSizeSm,
-  md: styles.triggerSizeMd,
-  lg: styles.triggerSizeLg,
-  xl: styles.triggerSizeXl,
-}
-
-const DEFAULT_PROPS = {
-  variant: 'outline',
-  size: 'md',
-  disabled: false,
-}
-
-/**
- * @param {import('solid-js').JSX.HTMLAttributes<HTMLDivElement> & {
- *   variant?: 'outline'
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- *   collection?: import('@ark-ui/solid').ListCollection<{ label: string, value: string, disabled?: boolean }>
- *   placeholder?: string
- * }} props
- */
-export function SelectPc(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['variant', 'size', 'class', 'collection', 'placeholder', 'disabled'],
-  )
-
-  const items = () => local.collection?.items ?? []
-  const triggerBorderRadius = `var(--b-radius-l2-${local.size})`
-
-  return (
-    <ArkSelect.Root
-      collection={local.collection}
-      disabled={local.disabled}
-      {...rest}
-    >
-      <ArkSelect.Trigger
-        class={[
-          'balik-select',
-          `balik-select--${local.variant}`,
-          `balik-select--${local.size}`,
-          styles.triggerBase,
-          triggerVariants[local.variant],
-          triggerSizes[local.size],
-          local.class,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        <ArkSelect.ValueText
-          placeholder={local.placeholder}
-        />
-        <span class={styles.indicator}>
-          <ChevronDown size="1em" aria-hidden="true" />
-        </span>
-      </ArkSelect.Trigger>
-      <ArkSelect.Positioner>
-        <ArkSelect.Content
-          class={styles.content}
-          style={{ '--_border-radius': triggerBorderRadius }}
-        >
-          <ArkSelect.List>
-            <For each={items()}>
-              {(item) => (
-                <ArkSelect.Item item={item} class={styles.item}>
-                  <ArkSelect.ItemText>{item.label}</ArkSelect.ItemText>
-                </ArkSelect.Item>
-              )}
-            </For>
-          </ArkSelect.List>
-        </ArkSelect.Content>
-      </ArkSelect.Positioner>
-      <ArkSelect.HiddenSelect />
-    </ArkSelect.Root>
-  )
-}
-
-SelectPc.Original = ArkSelect

package/src/SelectPc/SelectPc.module.css

@@ -1,132 +0,0 @@
-.triggerBase {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--_trigger-border-color, transparent);
-  border-radius: var(--_border-radius);
-  font-family: inherit;
-  outline: none;
-  box-shadow: none;
-  appearance: none;
-  touch-action: manipulation;
-  transition: background-color var(--b-transition-fast),
-    border-color var(--b-transition-fast),
-    color var(--b-transition-fast);
-  cursor: pointer;
-  text-align: start;
-  color: var(--base-fg);
-
-  --_current-intent: var(--base-edge);
-}
-
-.triggerBase[data-placeholder-shown] {
-  color: var(--color-disabled-fg);
-}
-
-.triggerBase:disabled {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-  color: var(--color-disabled-fg);
-}
-
-.triggerVariantOutline {
-  --_trigger-border-color: var(--_current-intent);
-  background-color: var(--base-bg);
-}
-
-.triggerVariantOutline:focus-visible {
-  background-color: var(--color-focus-bg);
-  border-color: var(--color-focus-border);
-}
-
-.triggerSizeXs {
-  height: var(--b-comp-height-xs);
-  line-height: var(--b-comp-line-height-xs);
-  padding: var(--b-comp-padding-y-xs) var(--b-comp-padding-x-xs);
-  font-size: var(--b-comp-font-size-xs);
-  --_border-radius: var(--b-radius-l2-xs);
-}
-
-.triggerSizeSm {
-  height: var(--b-comp-height-sm);
-  line-height: var(--b-comp-line-height-sm);
-  padding: var(--b-comp-padding-y-sm) var(--b-comp-padding-x-sm);
-  font-size: var(--b-comp-font-size-sm);
-  --_border-radius: var(--b-radius-l2-sm);
-}
-
-.triggerSizeMd {
-  height: var(--b-comp-height-md);
-  line-height: var(--b-comp-line-height-md);
-  padding: var(--b-comp-padding-y-md) var(--b-comp-padding-x-md);
-  font-size: var(--b-comp-font-size-md);
-  --_border-radius: var(--b-radius-l2-md);
-}
-
-.triggerSizeLg {
-  height: var(--b-comp-height-lg);
-  line-height: var(--b-comp-line-height-lg);
-  padding: var(--b-comp-padding-y-lg) var(--b-comp-padding-x-lg);
-  font-size: var(--b-comp-font-size-lg);
-  --_border-radius: var(--b-radius-l2-lg);
-}
-
-.triggerSizeXl {
-  height: var(--b-comp-height-xl);
-  line-height: var(--b-comp-line-height-xl);
-  padding: var(--b-comp-padding-y-xl) var(--b-comp-padding-x-xl);
-  font-size: var(--b-comp-font-size-xl);
-  --_border-radius: var(--b-radius-l2-xl);
-}
-
-.indicator {
-  margin-inline-start: auto;
-  display: flex;
-  align-items: center;
-  transition: transform var(--b-transition-fast);
-  color: var(--base-fg);
-}
-
-[data-state='open'] .indicator {
-  transform: rotate(180deg);
-}
-
-.content {
-  background-color: var(--base-bg);
-  border: 1px solid color-mix(in oklch, var(--base-fg) 10%, var(--base-bg));
-  border-radius: var(--_border-radius);
-  box-shadow: var(--b-shadow-md);
-  max-height: 256px;
-  overflow-y: auto;
-  padding: 4px;
-  z-index: var(--b-z-index-dropdown);
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  padding: 10px var(--b-comp-padding-x-md);
-  font-size: var(--b-comp-font-size-md);
-  line-height: var(--b-comp-line-height-md);
-  border-radius: var(--b-radius-l1-md);
-  cursor: pointer;
-  color: var(--base-fg);
-  transition: background-color 0.1s ease;
-}
-
-.item[data-highlighted] {
-  background-color: color-mix(in oklch, var(--base-edge) 8%, var(--base-bg));
-}
-
-.item[data-selected] {
-  color: var(--base-edge);
-  font-weight: 600;
-}
-
-.item[data-disabled] {
-  color: var(--color-disabled-fg);
-  cursor: not-allowed;
-}

package/src/SelectPc/index.js

@@ -1 +0,0 @@
-export { SelectPc } from './Select.jsx'

package/src/Skeleton/Skeleton.jsx

@@ -1,55 +0,0 @@
-import { splitProps, mergeProps, createMemo, For } from 'solid-js'
-import styles from './Skeleton.module.css'
-
-const DEFAULT_PROPS = {
-  count: 1,
-  circle: false,
-}
-
-/**
- * @param {import('solid-js').JSX.HTMLAttributes<HTMLDivElement> & {
- *   width?: string
- *   height?: string
- *   circle?: boolean
- *   count?: number
- *   class?: string
- * }} props
- */
-export function Skeleton(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['width', 'height', 'circle', 'count', 'class'],
-  )
-
-  const items = createMemo(() =>
-    Array.from({ length: local.count }, (_, i) => i),
-  )
-
-  const lineClass = () =>
-    [
-      'balik-skeleton',
-      styles.base,
-      local.circle && styles.circle,
-      local.class,
-    ]
-      .filter(Boolean)
-      .join(' ')
-
-  return (
-    <div {...rest} class={local.count > 1 ? styles.wrapper : undefined}>
-      <For each={items()}>
-        {() => (
-          <span
-            role="presentation"
-            aria-hidden="true"
-            class={lineClass()}
-            style={{
-              width: local.width || undefined,
-              height: local.height || undefined,
-            }}
-          />
-        )}
-      </For>
-    </div>
-  )
-}

package/src/Skeleton/Skeleton.module.css

@@ -1,33 +0,0 @@
-@keyframes shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.base {
-  display: block;
-  width: 100%;
-  height: 1em;
-  border-radius: var(--b-radius-l2-xs);
-  background: linear-gradient(
-    90deg,
-    color-mix(in oklch, var(--base-fg) 8%, var(--base-bg)) 25%,
-    color-mix(in oklch, var(--base-fg) 12%, var(--base-bg)) 50%,
-    color-mix(in oklch, var(--base-fg) 8%, var(--base-bg)) 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 2s ease-in-out infinite;
-}
-
-.circle {
-  border-radius: 50%;
-}
-
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--b-spacing-sm);
-}

package/src/Skeleton/index.js

@@ -1 +0,0 @@
-export { Skeleton } from './Skeleton.jsx'

package/src/Slider/Slider.jsx

@@ -1,50 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { Slider as ArkSlider } from '@ark-ui/solid'
-import styles from './Slider.module.css'
-
-const DEFAULT_PROPS = {
-  min: 0,
-  max: 100,
-  step: 1,
-}
-
-/**
- * @param {import('@ark-ui/solid').SliderRootProps & {
- *   label?: string
- *   class?: string
- * }} props
- */
-export function Slider(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['label', 'class', 'children'],
-  )
-
-  return (
-    <ArkSlider.Root
-      {...rest}
-      class={[
-        'balik-slider',
-        styles.root,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {local.label && (
-        <ArkSlider.Label class={styles.label}>{local.label}</ArkSlider.Label>
-      )}
-      <ArkSlider.Control class={styles.control}>
-        <ArkSlider.Track class={styles.track}>
-          <ArkSlider.Range class={styles.range} />
-        </ArkSlider.Track>
-        <ArkSlider.Thumb index={0} class={styles.thumb}>
-          <ArkSlider.DraggingIndicator class={styles.indicator} />
-          <ArkSlider.HiddenInput />
-        </ArkSlider.Thumb>
-      </ArkSlider.Control>
-    </ArkSlider.Root>
-  )
-}
-
-Slider.Original = ArkSlider

package/src/Slider/Slider.module.css

@@ -1,77 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 100%;
-  font-family: inherit;
-}
-
-.label {
-  font-size: var(--b-comp-font-size-md);
-  font-weight: 500;
-  color: var(--base-fg);
-}
-
-.control {
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 24px;
-  touch-action: none;
-}
-
-.track {
-  position: relative;
-  width: 100%;
-  height: 4px;
-  border-radius: 2px;
-  background-color: color-mix(in oklch, var(--base-fg) 12%, var(--base-bg));
-}
-
-.range {
-  position: absolute;
-  height: 100%;
-  border-radius: 2px;
-  background-color: var(--base-edge);
-}
-
-.thumb {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background-color: var(--base-bg);
-  border: 2px solid var(--base-edge);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-  cursor: pointer;
-  outline: none;
-  transition: box-shadow var(--b-transition-fast);
-}
-
-.thumb:focus-visible {
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--base-edge) 30%, transparent);
-}
-
-.indicator {
-  position: absolute;
-  top: -28px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 2px 6px;
-  border-radius: 4px;
-  background-color: var(--base-fg);
-  color: var(--base-bg);
-  font-size: 12px;
-  line-height: 18px;
-  font-family: var(--b-font-family, inherit);
-  white-space: nowrap;
-}
-
-.root[data-disabled] .thumb {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-  cursor: not-allowed;
-}
-
-.root[data-disabled] .range {
-  background-color: var(--color-disabled-border);
-}

package/src/Slider/index.js

@@ -1 +0,0 @@
-export { Slider } from './Slider.jsx'

package/src/Spinner/Spinner.jsx

@@ -1,45 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { Loader2 } from 'lucide-solid'
-import styles from './Spinner.module.css'
-
-const sizes = {
-  xs: styles.sizeXs,
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-  xl: styles.sizeXl,
-}
-
-const DEFAULT_PROPS = {
-  size: 'md',
-}
-
-/**
- * @param {{
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- *   label?: string
- *   class?: string
- * }} props
- */
-export function Spinner(props) {
-  const [local] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['size', 'label', 'class'],
-  )
-
-  return (
-    <Loader2
-      role="status"
-      aria-label={local.label || 'Loading'}
-      class={[
-        'balik-spinner',
-        `balik-spinner--${local.size}`,
-        styles.base,
-        sizes[local.size],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    />
-  )
-}

package/src/Spinner/Spinner.module.css

@@ -1,35 +0,0 @@
-.base {
-  color: var(--base-edge);
-  animation: spinner-spin 0.6s linear infinite;
-}
-
-.sizeXs {
-  width: 14px;
-  height: 14px;
-}
-
-.sizeSm {
-  width: 18px;
-  height: 18px;
-}
-
-.sizeMd {
-  width: 24px;
-  height: 24px;
-}
-
-.sizeLg {
-  width: 32px;
-  height: 32px;
-}
-
-.sizeXl {
-  width: 40px;
-  height: 40px;
-}
-
-@keyframes spinner-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/Spinner/index.js

@@ -1 +0,0 @@
-export { Spinner } from './Spinner.jsx'