@balikjs/mobile 0.0.1 → 0.1.0

package/src/Empty/Empty.jsx

@@ -1,35 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import styles from './Empty.module.css'
-
-const DEFAULT_PROPS = {
-  title: 'No data',
-}
-
-/**
- * @param {{
- *   title?: string
- *   icon?: import('solid-js').JSX.Element
- *   class?: string
- * }} props
- */
-export function Empty(props) {
-  const [local] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['title', 'icon', 'class'],
-  )
-
-  return (
-    <div
-      class={[
-        'balik-empty',
-        styles.base,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {local.icon}
-      <p class={styles.title}>{local.title}</p>
-    </div>
-  )
-}

package/src/Empty/Empty.module.css

@@ -1,17 +0,0 @@
-.base {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  width: 100%;
-  padding: 40px 16px;
-  gap: 12px;
-}
-
-.title {
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--base-fg);
-}

package/src/Empty/index.js

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

package/src/Fab/Fab.jsx

@@ -1,91 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { Popover } from '../Popover/Popover.jsx'
-import styles from './Fab.module.css'
-
-const DEFAULT_PROPS = {}
-
-/**
- * @param {import('solid-js').JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   icon: import('solid-js').JSX.Element
- *   class?: string
- * }} props
- */
-export function Fab(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['icon', 'class'],
-  )
-
-  return (
-    <button
-      {...rest}
-      type="button"
-      class={[
-        'balik-fab',
-        styles.base,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <span class={styles.icon}>{local.icon}</span>
-    </button>
-  )
-}
-
-/**
- * @param {import('solid-js').JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   icon: import('solid-js').JSX.Element
- *   label?: string
- *   class?: string
- * }} props
- */
-function FabItem(props) {
-  const [local, rest] = splitProps(props, ['icon', 'label', 'class'])
-
-  return (
-    <button
-      {...rest}
-      type="button"
-      class={[
-        styles.item,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <span class={styles.itemIcon}>{local.icon}</span>
-      {local.label && <span class={styles.itemLabel}>{local.label}</span>}
-    </button>
-  )
-}
-
-/**
- * @param {{
- *   icon: import('solid-js').JSX.Element
- *   'aria-label'?: string
- *   class?: string
- *   style?: string | import('solid-js').JSX.CSSProperties
- *   children?: import('solid-js').JSX.Element
- * }} props
- */
-function FabGroup(props) {
-  const [local] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['icon', 'aria-label', 'class', 'style', 'children'],
-  )
-
-  return (
-    <Popover positioning={{ placement: 'top-end', gutter: 16 }}>
-      <Popover.Trigger>
-        <Fab icon={local.icon} aria-label={local['aria-label']} class={styles.trigger} />
-      </Popover.Trigger>
-      <Popover.Content class={styles.groupContent}>
-        <div class={styles.items}>{local.children}</div>
-      </Popover.Content>
-    </Popover>
-  )
-}
-
-Fab.Group = FabGroup
-Fab.Group.Item = FabItem

package/src/Fab/Fab.module.css

@@ -1,94 +0,0 @@
-.base {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 56px;
-  border: none;
-  border-radius: 50%;
-  background-color: var(--base-edge);
-  color: var(--base-bg);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  cursor: pointer;
-  user-select: none;
-  touch-action: manipulation;
-  transition: box-shadow var(--b-transition-fast);
-}
-
-.base:active {
-  transform: scale(0.95);
-}
-
-.base:focus-visible {
-  outline: 2px solid var(--color-focus-border);
-  outline-offset: 2px;
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-}
-
-.icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.groupContent {
-  padding: 8px;
-  border: none;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-  background-color: transparent;
-  animation: none;
-}
-
-.items {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.item {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border: none;
-  border-radius: 24px;
-  background-color: color-mix(in oklch, var(--base-fg) 90%, var(--base-bg));
-  color: var(--base-bg);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  font-family: inherit;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  touch-action: manipulation;
-  transition: transform var(--b-transition-fast);
-}
-
-.item:active {
-  transform: scale(0.95);
-}
-
-.itemIcon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-}
-
-.itemIcon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.itemLabel {
-  font-size: 14px;
-  line-height: 20px;
-}

package/src/Fab/index.js

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

package/src/Input/Input.jsx

@@ -1,53 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { ark } from '@ark-ui/solid/factory'
-import styles from './Input.module.css'
-
-const variants = {
-  solid: styles.solid,
-  outline: styles.outline,
-  singleline: styles.singleline,
-}
-
-const sizes = {
-  xs: styles.sizeXs,
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-  xl: styles.sizeXl,
-}
-
-const DEFAULT_PROPS = {
-  variant: 'outline',
-  size: 'md',
-  disabled: false,
-}
-
-/**
- * @param {import('solid-js').JSX.InputHTMLAttributes<HTMLInputElement> & {
- *   variant?: 'solid' | 'outline' | 'singleline'
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- * }} props
- */
-export function Input(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['variant', 'size', 'class'],
-  )
-
-  return (
-    <ark.input
-      {...rest}
-      class={[
-        'balik-input',
-        `balik-input--${local.variant}`,
-        `balik-input--${local.size}`,
-        styles.base,
-        variants[local.variant],
-        sizes[local.size],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    />
-  )
-}

package/src/Input/Input.module.css

@@ -1,97 +0,0 @@
-.base {
-  display: block;
-  width: 100%;
-  border: 1px solid 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);
-
-  --_current-intent: var(--base-edge);
-}
-
-.base::placeholder {
-  color: var(--color-disabled-fg);
-}
-
-.base:disabled {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-  color: var(--color-disabled-fg);
-}
-
-.solid {
-  background-color: color-mix(in oklch, var(--base-fg) 2%, var(--base-bg));
-  border-color: transparent;
-}
-
-.solid:focus {
-  background-color: var(--color-focus-bg);
-}
-
-.outline {
-  background-color: var(--base-bg);
-  border-color: var(--_current-intent);
-}
-
-.outline:focus {
-  background-color: var(--color-focus-bg);
-  border-color: var(--color-focus-border);
-}
-
-.singleline {
-  background-color: transparent;
-  border-color: transparent;
-  border-bottom-color: var(--_current-intent);
-  border-radius: 0;
-}
-
-.singleline:focus {
-  background-color: var(--color-focus-bg);
-  border-bottom-color: var(--color-focus-border);
-}
-
-.sizeXs {
-  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-l1-xs);
-}
-
-.sizeSm {
-  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-l1-sm);
-}
-
-.sizeMd {
-  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-l1-md);
-}
-
-.sizeLg {
-  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-l1-lg);
-}
-
-.sizeXl {
-  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-l1-xl);
-}

package/src/Input/index.js

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

package/src/Link/Link.jsx

@@ -1,31 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import styles from './Link.module.css'
-
-const DEFAULT_PROPS = {}
-
-/**
- * @param {import('solid-js').JSX.AnchorHTMLAttributes<HTMLAnchorElement> & {
- *   class?: string
- * }} props
- */
-export function Link(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['class', 'children'],
-  )
-
-  return (
-    <a
-      {...rest}
-      class={[
-        'balik-link',
-        styles.base,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {local.children}
-    </a>
-  )
-}

package/src/Link/Link.module.css

@@ -1,18 +0,0 @@
-.base {
-  color: var(--base-edge);
-  text-decoration: none;
-  cursor: pointer;
-  font-weight: 500;
-  transition: color var(--b-transition-fast), text-decoration-color var(--b-transition-fast);
-}
-
-.base:hover {
-  text-decoration: underline;
-  text-decoration-color: color-mix(in oklch, var(--base-edge) 60%, transparent);
-}
-
-.base:focus-visible {
-  outline: 2px solid var(--color-focus-border);
-  outline-offset: 2px;
-  border-radius: 2px;
-}

package/src/Link/index.js

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

package/src/Popover/Popover.jsx

@@ -1,162 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { Portal } from 'solid-js/web'
-import { Popover as ArkPopover } from '@ark-ui/solid'
-import styles from './Popover.module.css'
-
-/**
- * @param {import('@ark-ui/solid').PopoverRootProps & {
- *   class?: string
- * }} props
- */
-function PopoverRoot(props) {
-  const [local, rest] = splitProps(
-    mergeProps({}, props),
-    ['class', 'children'],
-  )
-
-  return (
-    <ArkPopover.Root {...rest} lazyMount unmountOnExit>
-      {local.children}
-    </ArkPopover.Root>
-  )
-}
-
-/**
- * @param {import('@ark-ui/solid').PopoverTriggerProps & {
- *   class?: string
- * }} props
- */
-function PopoverTrigger(props) {
-  const [local, rest] = splitProps(
-    mergeProps({}, props),
-    ['class', 'children'],
-  )
-
-  return (
-    <ArkPopover.Trigger
-      {...rest}
-      as="div"
-      class={[
-        'balik-popover-trigger',
-        local.class,
-      ].filter(Boolean).join(' ')}
-    >
-      {local.children}
-    </ArkPopover.Trigger>
-  )
-}
-
-/**
- * @param {import('@ark-ui/solid').PopoverContentProps & {
- *   class?: string
- * }} props
- */
-function PopoverContent(props) {
-  const [local, rest] = splitProps(
-    mergeProps({}, props),
-    ['class', 'children'],
-  )
-
-  return (
-    <Portal mount={document.body}>
-      <ArkPopover.Positioner class={styles.positioner}>
-        <ArkPopover.Content
-          {...rest}
-          class={[
-            'balik-popover-content',
-            styles.content,
-            local.class,
-          ].filter(Boolean).join(' ')}
-        >
-          <ArkPopover.Arrow class={styles.arrow}>
-            <ArkPopover.ArrowTip class={styles.arrowTip} />
-          </ArkPopover.Arrow>
-          {local.children}
-        </ArkPopover.Content>
-      </ArkPopover.Positioner>
-    </Portal>
-  )
-}
-
-/**
- * @param {import('@ark-ui/solid').PopoverCloseTriggerProps & {
- *   class?: string
- * }} props
- */
-function PopoverCloseTrigger(props) {
-  const [local, rest] = splitProps(
-    mergeProps({}, props),
-    ['class', 'children'],
-  )
-
-  return (
-    <ArkPopover.CloseTrigger
-      {...rest}
-      class={[
-        styles.closeTrigger,
-        local.class,
-      ].filter(Boolean).join(' ')}
-    >
-      {local.children}
-    </ArkPopover.CloseTrigger>
-  )
-}
-
-/**
- * @param {import('@ark-ui/solid').PopoverTitleProps & {
- *   class?: string
- * }} props
- */
-function PopoverTitle(props) {
-  const [local, rest] = splitProps(
-    mergeProps({}, props),
-    ['class', 'children'],
-  )
-
-  return (
-    <ArkPopover.Title
-      {...rest}
-      class={[
-        styles.title,
-        local.class,
-      ].filter(Boolean).join(' ')}
-    >
-      {local.children}
-    </ArkPopover.Title>
-  )
-}
-
-/**
- * @param {import('@ark-ui/solid').PopoverDescriptionProps & {
- *   class?: string
- * }} props
- */
-function PopoverDescription(props) {
-  const [local, rest] = splitProps(
-    mergeProps({}, props),
-    ['class', 'children'],
-  )
-
-  return (
-    <ArkPopover.Description
-      {...rest}
-      class={[
-        styles.description,
-        local.class,
-      ].filter(Boolean).join(' ')}
-    >
-      {local.children}
-    </ArkPopover.Description>
-  )
-}
-
-export function Popover(props) {
-  return <PopoverRoot {...props} />
-}
-
-Popover.Trigger = PopoverTrigger
-Popover.Content = PopoverContent
-Popover.Title = PopoverTitle
-Popover.Description = PopoverDescription
-Popover.CloseTrigger = PopoverCloseTrigger
-Popover.Original = ArkPopover

package/src/Popover/Popover.module.css

@@ -1,63 +0,0 @@
-.positioner {
-  z-index: var(--b-z-index-dropdown);
-}
-
-.content {
-  padding: 12px;
-  background-color: var(--base-bg);
-  border-radius: var(--b-radius-l2-md);
-  box-shadow: var(--b-shadow-lg);
-  border: 1px solid color-mix(in oklch, var(--base-fg) 8%, var(--base-bg));
-  outline: none;
-  animation: popoverIn 0.15s ease;
-}
-
-@keyframes popoverIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.arrowTip {
-  --arrow-size: 8px;
-  --arrow-background: var(--base-bg);
-}
-
-.closeTrigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: none;
-  border-radius: var(--b-radius-l1-md);
-  background: transparent;
-  color: color-mix(in oklch, var(--base-fg) 40%, transparent);
-  cursor: pointer;
-  touch-action: manipulation;
-}
-
-.title {
-  margin: 0;
-  padding-right: 24px;
-  font-size: var(--b-comp-font-size-md);
-  font-weight: 600;
-  color: var(--base-fg);
-}
-
-.description {
-  margin: 0;
-  margin-top: 4px;
-  font-size: var(--b-comp-font-size-sm);
-  color: color-mix(in oklch, var(--base-fg) 55%, transparent);
-  line-height: 1.5;
-}

package/src/Popover/index.js

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