@aws-amplify/ui-svelte 0.0.0-next-9a4f1cf-20220113211745 → 0.0.0-next-23d2233-20251017111356

package/dist/components/controls/TextField.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type FullAutoFill } from 'svelte/elements';
+interface TextFields {
+    label?: string;
+    id?: string;
+    autocomplete?: FullAutoFill;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+    type?: string;
+    hideLabel?: boolean;
+}
+declare const TextField: import("svelte").Component<TextFields, {}, "">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/dist/components/controls/index.d.ts

@@ -0,0 +1,8 @@
+export { default as AliasField } from './AliasField.svelte';
+export { default as Button } from './Button.svelte';
+export { default as FederatedSignIn } from './FederatedSignIn.svelte';
+export { default as PasswordField } from './PasswordField.svelte';
+export { default as TextField } from './TextField.svelte';
+export { default as Checkbox } from './CheckBox.svelte';
+export { default as SignUpFormFields } from './SignUpFormFields.svelte';
+export { default as ForceNewPasswordFormFields } from './ForceNewPasswordFormFields.svelte';

package/dist/components/controls/index.js

@@ -0,0 +1,8 @@
+export { default as AliasField } from './AliasField.svelte';
+export { default as Button } from './Button.svelte';
+export { default as FederatedSignIn } from './FederatedSignIn.svelte';
+export { default as PasswordField } from './PasswordField.svelte';
+export { default as TextField } from './TextField.svelte';
+export { default as Checkbox } from './CheckBox.svelte';
+export { default as SignUpFormFields } from './SignUpFormFields.svelte';
+export { default as ForceNewPasswordFormFields } from './ForceNewPasswordFormFields.svelte';

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Authenticator';
+export * from './controls';
+export * from './primitives';
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1,4 @@
+export * from './Authenticator';
+export * from './controls';
+export * from './primitives';
+export * from '../types';

package/dist/components/primitives/Alert.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { translate } from '@aws-amplify/ui';
+  import Button from '../controls/Button.svelte';
+  import { type Snippet } from 'svelte';
+
+  let show = $state(true);
+
+  const dismissAriaLabel = translate('Dismiss alert');
+
+  function close() {
+    show = false;
+  }
+  const {
+    children,
+  }: {
+    children?: Snippet;
+  } = $props();
+</script>
+
+{#if show}
+  <div
+    class="amplify-flex amplify-alert amplify-alert--error amplify-authenticator__base"
+    data-variation="error"
+    role="alert"
+  >
+    <div class="amplify-flex amplify-authenticator__icon-wrapper">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="amplify-icon"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+        ></path>
+      </svg>
+      <div>{@render children?.()}</div>
+    </div>
+    <Button
+      class="amplify-field-group__control amplify-alert__dismiss"
+      aria-label={dismissAriaLabel}
+      fullWidth={false}
+      variation="link"
+      type="button"
+      onclick={() => close()}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="amplify-icon"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path
+          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+        ></path>
+      </svg>
+    </Button>
+  </div>
+{/if}

package/dist/components/primitives/Alert.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/primitives/Box.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { type HTMLAttributes } from 'svelte/elements';
+
+  const { children }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div data-amplify-box="">
+  {@render children?.()}
+</div>

package/dist/components/primitives/Box.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'svelte/elements';
+declare const Box: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type Box = ReturnType<typeof Box>;
+export default Box;

package/dist/components/primitives/FederatedSignInButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { type HTMLButtonAttributes } from 'svelte/elements';
+  import { useAuthenticator } from '../../stores/authenticator.svelte';
+
+  import Button from '../controls/Button.svelte';
+
+  interface Props extends HTMLButtonAttributes {
+    provider: string;
+  }
+
+  const { provider, children }: Props = $props();
+
+  const { authenticator } = useAuthenticator();
+
+  // Methods
+  const onClick = (): void => {
+    authenticator.toFederatedSignIn({ provider });
+  };
+</script>
+
+<Button
+  class="amplify-authenticator__federated-button"
+  type="button"
+  onclick={() => onClick()}
+>
+  {@render children?.()}
+</Button>

package/dist/components/primitives/FederatedSignInButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    provider: string;
+}
+declare const FederatedSignInButton: import("svelte").Component<Props, {}, "">;
+type FederatedSignInButton = ReturnType<typeof FederatedSignInButton>;
+export default FederatedSignInButton;

package/dist/components/primitives/FieldSet.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { type HTMLFieldsetAttributes } from 'svelte/elements';
+
+  const { children, ...rest }: HTMLFieldsetAttributes = $props();
+</script>
+
+<fieldset {...rest} data-amplify-fieldset="">
+  {@render children?.()}
+</fieldset>

package/dist/components/primitives/FieldSet.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLFieldsetAttributes } from 'svelte/elements';
+declare const FieldSet: import("svelte").Component<HTMLFieldsetAttributes, {}, "">;
+type FieldSet = ReturnType<typeof FieldSet>;
+export default FieldSet;

package/dist/components/primitives/Footer.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { type HTMLAttributes } from 'svelte/elements';
+
+  const { children, ...rest }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<footer {...rest}>
+  {@render children?.()}
+</footer>

package/dist/components/primitives/Footer.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'svelte/elements';
+declare const Footer: import("svelte").Component<HTMLAttributes<HTMLElement>, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/components/primitives/Form.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { type HTMLFormAttributes } from 'svelte/elements';
+
+  const { children, ...rest }: HTMLFormAttributes = $props();
+</script>
+
+<form data-amplify-form="" {...rest}>
+  {@render children?.()}
+</form>

package/dist/components/primitives/Form.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLFormAttributes } from 'svelte/elements';
+declare const Form: import("svelte").Component<HTMLFormAttributes, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/primitives/FormField.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { nanoid } from 'nanoid';
+  import { type FullAutoFill } from 'svelte/elements';
+
+  import { type FormFieldOptions, getErrors, translate } from '@aws-amplify/ui';
+  import { useAuthenticator } from '../../stores/authenticator.svelte';
+  import PasswordField from '../controls/PasswordField.svelte';
+  import AliasField from '../controls/AliasField.svelte';
+
+  interface BaseFormField {
+    name?: string;
+    formField?: FormFieldOptions;
+  }
+
+  const { name = '', formField = {} }: BaseFormField = $props();
+
+  const { authenticator } = $derived(useAuthenticator());
+
+  const { type } = formField;
+
+  const isPasswordField = $derived(type === 'password');
+
+  const errorId = nanoid(12);
+
+  const errors = $derived(getErrors(authenticator.validationErrors[name]));
+  const hasError = $derived(errors?.length > 0);
+  const ariaDescribedBy = $derived(hasError ? errorId : undefined);
+  const autocomplete = $derived(
+    formField.autocomplete ?? ''
+  ) as unknown as FullAutoFill;
+</script>
+
+{#if isPasswordField}
+  <PasswordField
+    {name}
+    {hasError}
+    {autocomplete}
+    label={formField.label ?? ''}
+    placeholder={formField.placeholder}
+    required={formField.isRequired}
+    labelHidden={formField.labelHidden}
+    describedBy={ariaDescribedBy}
+  />
+{:else}
+  <AliasField
+    {name}
+    {hasError}
+    {autocomplete}
+    label={formField.label ?? ''}
+    placeholder={formField.placeholder}
+    required={formField.isRequired}
+    labelHidden={formField.labelHidden}
+    dialCode={formField.dialCode}
+    dialCodeList={formField.dialCodeList}
+    type={formField.type}
+    describedBy={ariaDescribedBy}
+  />
+{/if}
+
+{#if hasError}
+  <div id={ariaDescribedBy}>
+    {#each errors as error, idx (idx)}
+      <p
+        role="alert"
+        data-variation="error"
+        class="amplify-text amplify-text--error"
+      >
+        {translate(error)}
+      </p>
+    {/each}
+  </div>
+{/if}

package/dist/components/primitives/FormField.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type FormFieldOptions } from '@aws-amplify/ui';
+interface BaseFormField {
+    name?: string;
+    formField?: FormFieldOptions;
+}
+declare const FormField: import("svelte").Component<BaseFormField, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;

package/dist/components/primitives/FormFields.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import {
+    type FormFieldComponents,
+    type FormFieldsArray,
+    getSortedFormFields,
+  } from '@aws-amplify/ui';
+  import FormField from './FormField.svelte';
+
+  import { useAuth } from '../../stores/authenticator.svelte';
+  import { onMount } from 'svelte';
+  import { get } from 'svelte/store';
+
+  let formFields: FormFieldsArray = $state([]);
+
+  interface BaseFormFields {
+    route: FormFieldComponents;
+  }
+
+  const { route }: BaseFormFields = $props();
+  const { state: authState } = useAuth();
+
+  onMount(() => {
+    formFields = getSortedFormFields(route, get(authState));
+  });
+</script>
+
+{#each formFields as [name, formField] (name)}
+  <FormField {name} {formField} />
+{/each}

package/dist/components/primitives/FormFields.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type FormFieldComponents } from '@aws-amplify/ui';
+interface BaseFormFields {
+    route: FormFieldComponents;
+}
+declare const FormFields: import("svelte").Component<BaseFormFields, {}, "">;
+type FormFields = ReturnType<typeof FormFields>;
+export default FormFields;

package/dist/components/primitives/Heading.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { type HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLHeadingElement> {
+    level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  }
+
+  const { level = 'h1', children, ...rest }: Props = $props();
+</script>
+
+<svelte:element this={level} {...rest}>
+  {@render children?.()}
+</svelte:element>

package/dist/components/primitives/Heading.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLHeadingElement> {
+    level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

package/dist/components/primitives/Input.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { type HTMLInputAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLInputAttributes {
+    onInput?: (value: string) => void;
+  }
+
+  let { onInput, value = $bindable(), ...rest }: Props = $props();
+
+  const handleInput = (e: Event): void => {
+    onInput?.((e.target as HTMLInputElement).value);
+  };
+</script>
+
+<input
+  {...rest}
+  bind:value
+  onchange={(event) => handleInput(event)}
+  data-amplify-input
+/>

package/dist/components/primitives/Input.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLInputAttributes } from 'svelte/elements';
+interface Props extends HTMLInputAttributes {
+    onInput?: (value: string) => void;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/primitives/Label.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { type HTMLLabelAttributes } from 'svelte/elements';
+
+  const { children, ...rest }: HTMLLabelAttributes = $props();
+</script>
+
+<label data-amplify-label {...rest}>
+  {@render children?.()}
+</label>

package/dist/components/primitives/Label.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLLabelAttributes } from 'svelte/elements';
+declare const Label: import("svelte").Component<HTMLLabelAttributes, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/primitives/Select.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { type HTMLSelectAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLSelectAttributes {
+    selectValue?: string;
+    options?: string[];
+    onChange?: (value: string) => void;
+  }
+
+  const { selectValue = '', options, onChange, ...rest }: Props = $props();
+
+  const handleChange = (e: Event): void => {
+    onChange?.((e.target as HTMLInputElement).value);
+  };
+</script>
+
+{#if options}
+  <select {...rest} onchange={(e) => handleChange(e)}>
+    {#each options as option, idx (idx)}
+      <option
+        value={option}
+        selected={option === selectValue ? true : undefined}
+      >
+        {option}
+      </option>
+    {/each}
+  </select>
+{/if}

package/dist/components/primitives/Select.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLSelectAttributes } from 'svelte/elements';
+interface Props extends HTMLSelectAttributes {
+    selectValue?: string;
+    options?: string[];
+    onChange?: (value: string) => void;
+}
+declare const Select: import("svelte").Component<Props, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/primitives/Spacer.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  const { children } = $props();
+</script>
+
+<span data-amplify-spacer="">
+  {@render children?.()}
+</span>

package/dist/components/primitives/Spacer.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Spacer: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Spacer = ReturnType<typeof Spacer>;
+export default Spacer;

package/dist/components/primitives/Text.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { type HTMLAttributes } from 'svelte/elements';
+
+  const { children }: HTMLAttributes<HTMLSpanElement> = $props();
+</script>
+
+<span data-amplify-text="">
+  {@render children?.()}
+</span>

package/dist/components/primitives/Text.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'svelte/elements';
+declare const Text: import("svelte").Component<HTMLAttributes<HTMLSpanElement>, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/primitives/TwoTabItem.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { type HTMLButtonAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLButtonAttributes {
+    active?: boolean;
+    id: string;
+    label: string;
+  }
+
+  const { active = false, id, label, ...rest }: Props = $props();
+</script>
+
+<button
+  {...rest}
+  tabindex={active ? 0 : -1}
+  aria-selected={active ? 'true' : 'false'}
+  class={{
+    'amplify-tabs__item': true,
+    'amplify-tabs__item--active': active,
+  }}
+  id={`${id}-tab`}
+  aria-controls={`${id}-panel`}
+  role="tab"
+>
+  {label}
+</button>

package/dist/components/primitives/TwoTabItem.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    active?: boolean;
+    id: string;
+    label: string;
+}
+declare const TwoTabItem: import("svelte").Component<Props, {}, "">;
+type TwoTabItem = ReturnType<typeof TwoTabItem>;
+export default TwoTabItem;

package/dist/components/primitives/TwoTabs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Wrapper from './Wrapper.svelte';
+
+  const { children } = $props();
+</script>
+
+<Wrapper
+  tabindex={0}
+  aria-orientation="horizontal"
+  data-orientation="horizontal"
+  class="amplify-authenticator__tabs amplify-tabs"
+>
+  <Wrapper
+    class="amplify-tabs__list amplify-tabs__list--top amplify-tabs__list--equal amplify-authenticator__tabs-wrapper"
+    role="tablist"
+  >
+    {@render children?.()}
+  </Wrapper>
+</Wrapper>

package/dist/components/primitives/TwoTabs.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const TwoTabs: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type TwoTabs = ReturnType<typeof TwoTabs>;
+export default TwoTabs;

package/dist/components/primitives/Wrapper.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { type HTMLAttributes } from 'svelte/elements';
+
+  const { children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div {...rest}>
+  {@render children?.()}
+</div>

package/dist/components/primitives/Wrapper.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'svelte/elements';
+declare const Wrapper: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type Wrapper = ReturnType<typeof Wrapper>;
+export default Wrapper;

package/dist/components/primitives/index.d.ts

@@ -0,0 +1,17 @@
+export { default as Alert } from './Alert.svelte';
+export { default as Box } from './Box.svelte';
+export { default as FederatedSignInButton } from './FederatedSignInButton.svelte';
+export { default as FieldSet } from './FieldSet.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Form } from './Form.svelte';
+export { default as FormField } from './FormField.svelte';
+export { default as FormFields } from './FormFields.svelte';
+export { default as Heading } from './Heading.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Label } from './Label.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Spacer } from './Spacer.svelte';
+export { default as Text } from './Text.svelte';
+export { default as TwoTabItem } from './TwoTabItem.svelte';
+export { default as TwoTabs } from './TwoTabs.svelte';
+export { default as Wrapper } from './Wrapper.svelte';

package/dist/components/primitives/index.js

@@ -0,0 +1,17 @@
+export { default as Alert } from './Alert.svelte';
+export { default as Box } from './Box.svelte';
+export { default as FederatedSignInButton } from './FederatedSignInButton.svelte';
+export { default as FieldSet } from './FieldSet.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Form } from './Form.svelte';
+export { default as FormField } from './FormField.svelte';
+export { default as FormFields } from './FormFields.svelte';
+export { default as Heading } from './Heading.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Label } from './Label.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Spacer } from './Spacer.svelte';
+export { default as Text } from './Text.svelte';
+export { default as TwoTabItem } from './TwoTabItem.svelte';
+export { default as TwoTabs } from './TwoTabs.svelte';
+export { default as Wrapper } from './Wrapper.svelte';

package/dist/index.d.ts

@@ -1,3 +1,7 @@
-import Authenticator from './components/Authenticator.svelte';
-import * as authStore from './components/authStore';
-export { Authenticator, authStore };
+import './styles.css';
+export * from './components/Authenticator';
+export * from './components/controls';
+export * from './components/primitives';
+export * from './types';
+export { useAuthenticator } from './stores/authenticator.svelte';
+export { translations } from '@aws-amplify/ui';

package/dist/index.js

@@ -1,3 +1,8 @@
-import Authenticator from './components/Authenticator.svelte';
-import * as authStore from './components/authStore';
-export { Authenticator, authStore };
+// Reexport your entry components here
+import './styles.css';
+export * from './components/Authenticator';
+export * from './components/controls';
+export * from './components/primitives';
+export * from './types';
+export { useAuthenticator } from './stores/authenticator.svelte';
+export { translations } from '@aws-amplify/ui';