@phila/phila-ui-search 1.0.0

package/README.md

@@ -0,0 +1,75 @@
+# Search Component
+
+A simple, customizable Vue 3. Search component built with TypeScript and Vite.
+a search bar
+
+## Features
+
+- 🎯 TypeScript support with full type definitions
+
+## Installation
+
+```bash
+npm install @phila/phila-ui-search
+# or
+yarn add @phila/phila-ui-search
+# or
+pnpm add @phila/phila-ui-search
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Search } from "@phila/phila-ui-search";
+</script>
+<template>...Add basic component template here...</template>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+
+| ...Add props here...
+
+## Events
+
+| Event | Payload | Description |
+| ----- | ------- | ----------- |
+
+| ...Add events here...
+
+## Examples
+
+...Add examples here...
+
+## Development
+
+### Install Dependencies
+
+```bash
+pnpm install
+```
+
+### Run Demo
+
+```bash
+pnpm dev
+```
+
+### Build Library
+
+```bash
+pnpm build
+```
+
+### Type Check
+
+```bash
+pnpm type-check
+```
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1 @@
+.x-button{color:var(--Schemes-On-Surface)!important}.phila-input--required .phila-label:after{content:"*";padding-left:.125rem}.phila-input{display:flex;flex-direction:column}.phila-input:focus-within .phila-label{color:var(--Schemes-Primary)}.phila-input .phila-label{color:var(--Schemes-On-Surface)}.phila-input .phila-label--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-text-field{box-sizing:border-box;border:var(--scale-xxsmall) solid var(--Schemes-Surface-Container-Low);border-bottom:var(--scale-xxsmall) solid var(--Schemes-Outline);background:var(--Schemes-Surface-Container-Low);display:flex;width:25rem;padding:0 var(--scale-small) 0 var(--scale-small);flex-direction:column;align-items:center;gap:.625rem;flex:1 0 0}.phila-input .phila-text-field:focus-within{background-color:var(--Schemes-Surface-Container-Lowest);border-style:solid;border-width:2px;border-color:var(--Schemes-Primary)}.phila-input .phila-text-field--filled{border-color:var(--Schemes-On-Surface);border-width:1px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input .phila-text-field--filled .state-layer{padding:calc(var(--scale-xsmall, .25rem) + 1px) calc(var(--scale-small, .5rem) + 1px)}.phila-input .state-layer{display:flex;padding:var(--scale-xsmall, .25rem) var(--scale-small, .5rem);align-items:center;gap:.5rem;flex:1 0 0;align-self:stretch}.phila-input .state-layer:focus-within{padding:var(--scale-xsmall, .25rem) var(--scale-small, .5rem)}.phila-input .content{display:flex;height:3rem;padding:var(--scale-xsmall, .25rem) 0;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.phila-input .input-text-container{display:flex;align-items:center;gap:.125rem;align-self:stretch;width:100%}.phila-input .phila-text-field-input{width:100%;background-color:inherit;border:none;color:var(--Schemes-On-Surface, #000)}.phila-input .phila-text-field-input:focus{outline:none}.phila-input .phila-text-field-input:focus-visible{outline:none}.phila-input .phila-text-field-input::placeholder{color:var(--Schemes-Surface-Container-Highest);font-family:var(--Static-Body-Large-Font);font-size:var(--Static-Body-Large-Size);font-style:normal;font-weight:400;line-height:var(--Static-Body-Large-Line-Height);letter-spacing:var(--Static-Body-Large-Tracking)}.phila-input .phila-supporting-text--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-supporting-text{color:var(--Schemes-On-Surface)}.phila-input .phila-error-text{color:var(--Schemes-Error-Container-2)}.phila-input--error:focus-within .phila-label{color:var(--Schemes-Error-Container-2)}.phila-input--error .phila-label{color:var(--Schemes-Error-Container-2)}.phila-input--error .phila-text-field{border-color:var(--Schemes-Error-Container-2);border-width:2px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--error .phila-text-field:focus-within{border-color:var(--Schemes-Error-Container-2);border-width:2px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--error .state-layer{padding:calc(var(--scale-xsmall, .25rem) - 1px) calc(var(--scale-small, .5rem) - 1px)!important}.phila-input--disabled{cursor:not-allowed}.phila-input--disabled .phila-label{cursor:not-allowed;color:var(--Schemes-Surface-Container-High)}.phila-input--disabled .phila-text-field{cursor:not-allowed;color:var(--Schemes-Surface-Container-High);border-color:var(--Schemes-Surface-Container-High);border-width:1px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--disabled .phila-supporting-text{color:var(--Schemes-Surface-Container-High)}.search{display:flex;width:48.8125rem;align-items:center}.phila-text-field--search{border-color:var(--Schemes-Primary)!important;border-width:2px!important;border-style:solid!important;background-color:var(--Schemes-Surface-Container-Lowest)!important}.phila-text-field--search .state-layer{padding:var(--scale-xsmall, .25rem) var(--scale-small, .5rem)!important;padding-top:0!important;padding-bottom:0!important}.phila-text-field--search .state-layer:focus-within{padding-top:0!important;padding-bottom:0!important}.phila-button--search{background:var(--Schemes-Primary)!important}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './search/src/index'
+export {}